时间戳

首页 > 解决方案 > 带有目标红线的 DC.JS 条形图

javascript - 带有目标红线的 DC.JS 条形图

问题描述

我试图在我的条形图上添加一条水平目标线，但我无法按照我遵循的示例添加它。

html中有一条默认的y线，<line stroke="currentColor" x2="-6"></line>它对应于默认的y轴值，如果在html中的浏览器检查器中，y将x2值更改为300（例如）Y得到了我想要的但不知道在哪里做代码，因为它是 :nth-child(8) 在 DOM

我想这应该是一件容易的事，但没能做到。

如果有人能指导我找到解决方案，我将不胜感激。

这是我的js代码

var monthChart = dc.barChart('#monthChart');

d3.csv('indisp.csv').then(data2 =>{
   const monthformat = '%m';
    data2.forEach(d => {
      d.disp = +d.disp *100 ;
    });
    console.log(data2)
    var ndx       = crossfilter(data2);
    
    var dispDim = ndx.dimension(function(d) {return d.MONTH;})
    
    var dispGroup       = dispDim.group().reduceSum(function(d) {return d.disp;});

    monthChart
      .width(404)
      .height(250)
      .x(d3.scaleBand())
      .xUnits(dc.units.ordinal)
      .y(d3.scaleLinear().domain([99.01, 100]))
      .brushOn(false)
      .xAxisLabel('Fruit')
      .yAxisLabel('Quantity Sold')
      .dimension(dispDim)
      .barPadding(0.2)
      .outerPadding(0.25)
      .group(dispGroup)
      

    dc.renderAll();
  });

标签： javascriptchartsdc.js

解决方案

如果您只想要一个固定位置的基本参考线，您可以简单地在 DC 渲染后将一条线附加到您的 SVG。这是一个带有演示的 JSFiddle ，但代码的相关部分是这样的：

barChart.on("renderlet", function(chart) {
  
  chart.select(".chart-body")
    .append("line")
    .attr('x1', 0)
    .attr('y1', 110)
    .attr('x2', 300)
    .attr('y2', 110)
    .attr('stroke', 'black')
    .attr('stroke-width', 1);

});

如果您的 Y 轴可能会改变，您将需要调整比例，以便该线的 y1 和 y2 值与您拥有的任何范围相关联。

推荐阅读