在dc.js的行行中绘制额外的行 [英] draw extra line in row line with dc.js

问题描述

我尝试使用dc.js在行线中绘制与Y轴平行的多余线，但我不知道如何设置line_data，似乎与在折线图或条形图中绘制多余的线不同。 （

I try to draw extra line parallel to the Y axis in a row line with dc.js, but I do not know how to set the line_data ,it seemes that it differ with draw extra line in a line chart or bar chart. (http://dc-js.github.io/dc.js/examples/bar-extra-line.html). My code is as follows.

    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();

解决方案

A few things are different about the row chart because it was developed independently and contributed by a different author from the rest of the library.

In particular, there is no Y scale, but we don't need one because just want to draw the line fom zero to the (effective, without margins) height. We'll still use the X scale to map the X location where we want the line to screen coordinates:

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

The d3.svg.line() definition is the same:

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

The row chart does not have an inner <g.chart-body> (for no good reason) so we just use the main <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);

Finally, pretransition is a better event to listen to, since there's no delay and the line is drawn before the rows.

I've added an example in dc.js 2.1.10.

这篇关于在dc.js的行行中绘制额外的行的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！