使用dc.js

Question

我尝试在与dc.js的行中绘制与Y轴平行的额外线，但我不知道如何设置line_data，它表示它与折线图或条形图中的绘制额外线不同。 （http://dc-js.github.io/dc.js/examples/bar-extra-line.html）。我的代码如下。

    var datasetA = [{"Name":"A","Value":"100"},
                    {"Name":"B","Value":"80"},
                    {"Name":"C","Value":"60"},
                    {"Name":"D","Value":"40"},
                    {"Name":"E","Value":"20"}];     
    var oeChart = dc.rowChart("#subjectA");
    var ndx = crossfilter(datasetA);
    var nameDim = ndx.dimension(function(d){ return d.Name; });
    var valueDim = nameDim.group().reduceSum(function(d) {return d.Value;});
    oeChart.width(550).height(200)
      .margins({left : 30,top : 10,right : 50,bottom : 30})
      .dimension(nameDim)
      .group(valueDim)
      .elasticX(true)
          //draw extra line
      .on('renderlet',function(chart) {
        var score = 65;
            //var ynum = chart.y().range().length;
        var xnum = chart.x().range().length;
        var oeScoreData = [ {x : chart.x().range()(score),y : chart.y()[0]}, 
          {x : chart.x().range()(score),y : chart.y()[ynum-1]} ];
        var oeLine = d3.svg.line()
          .x(function(d) {return d.x;})
          .y(function(d) {return d.y;})
          .interpolate('linear');
        var oeChartBody = chart.select('g.chart-body');
        var oePath = oeChartBody
          .selectAll('path.extra')
          .data([oeScoreData]);
        oePath.enter().append('path')
          .attr('class','oeExtra')
          .attr('stroke', 'red')
          .attr('id', 'oeLine')
          .attr("stroke-width", 1)
          .style("stroke-dasharray", ("10,3"));
        path.attr('d', oeLine);
      })
        .colors(d3.scale.category20());
    oeChart.render();

Answer 1

行图有一些不同之处，因为它是独立开发的，并由不同的作者从图书馆的其余部分提供。

特别是，没有Y刻度，但我们不需要一个，因为只想将零线绘制到（有效，无边距）高度。我们仍然会使用X比例来映射我们想要线到屏幕坐标的X位置：

    var x_vert = 45;
    var extra_data = [
        {x: chart.x()(x_vert), y: 0},
        {x: chart.x()(x_vert), y: chart.effectiveHeight()}
    ];

d3.svg.line()定义相同：

    var line = d3.svg.line()
        .x(function(d) { return d.x; })
        .y(function(d) { return d.y; })
        .interpolate('linear');

行图没有内部<g.chart-body>（没有充分理由）所以我们只使用主<g>：

    var chartBody = chart.select('g');
    var path = chartBody.selectAll('path.extra').data([extra_data]);
    path.enter().append('path').attr({
        class: 'extra',
        stroke: 'red',
        id: 'extra-line'
    });
    path.attr('d', line);

最后，pretransition是一个更好听的事件，因为没有延迟，行在行之前绘制。

我在dc.js 2.1.10中added an example。