如何调整Nivo堆叠条形图中marker标记线宽度，使其不超出条形范围

没有遗漏的配置项，Nivo 原生的 markers 属性本身默认会将标记线渲染为横跨整个坐标系的宽度，没有公开的配置参数可以限制它仅在条形范围内显示。

你可以按照官方提到的 layers 自定义层方案实现需求，具体操作如下：

• 先保留 Bar 组件原有的所有渲染层，额外加入自定义的标记线渲染层，示例配置为 layers={['grid', 'axes', 'bars', 'legends', CustomBarMarker]}
• 自定义的 CustomBarMarker 组件可以拿到 Nivo 注入的 x轴比例尺、y轴比例尺、条形宽度、当前数据集等参数，你可以自己计算对应 ceiling、floor 值的y坐标，只在单个条形的x轴起止坐标范围内渲染线段即可，同时还可以直接复用你原来的标注样式配置。

另外你贴出的代码里存在语法错误：两个marker对象的lineStyle.stroke和textStyle.fill属性值末尾少了闭合单引号，运行前需要先修正。

附自定义层参考代码：

// 自定义标记线层
const CustomBarMarker = ({ yScale, bars }) => {
  const ceiling = 80 // 替换为你的实际值
  const floor = 40 // 替换为你的实际值
  
  return bars.map(bar => {
    // 获取单个条形的x坐标范围
    const barXStart = bar.x
    const barXEnd = bar.x + bar.width
    // 计算对应值的y坐标
    const ceilingY = yScale(ceiling)
    const floorY = yScale(floor)
    
    return (
      <g key={bar.id}>
        {/* 上限标记线 */}
        <line
          x1={barXStart}
          x2={barXEnd}
          y1={ceilingY}
          y2={ceilingY}
          stroke="red"
          strokeWidth={2}
        />
        {/* 上限标注 */}
        <text
          x={barXEnd - 34}
          y={ceilingY}
          fill="orange"
          fontWeight="bold"
          textAnchor="end"
        >
          {ceiling}%
        </text>
        {/* 下限标记线 */}
        <line
          x1={barXStart}
          x2={barXEnd}
          y1={floorY}
          y2={floorY}
          stroke="red"
          strokeWidth={2}
        />
        {/* 下限标注 */}
        <text
          x={barXEnd - 34}
          y={floorY}
          fill="orange"
          fontWeight="bold"
          textAnchor="end"
        >
          {floor}%
        </text>
      </g>
    )
  })
}

// NivoBar 组件使用时删除原有markers属性，添加layers配置
<NivoBar
  data={data}
  keys={['floor', 'pattern', 'ceiling']}
  layers={['grid', 'axes', 'bars', 'legends', CustomBarMarker]}
  // 其他原有配置保留
/>

内容的提问来源于stack exchange，提问作者arvidrus