javascript - 如何在d3中的水平条形图的x轴上添加一条线

Question

我想在我的水平条形图上添加一条类似于图像的线，在这种情况下，该线应代表 x 轴上的 270，但我得到错误的无效路径属性。这是 plunker code:

 var info = [
     {name: "Walnuts",   value:206}, 
    {name: "Almonds",   value:332}

    ];

    /* Set chart dimensions */
    var width   = 960, 
        height  = 500,
        margin  = {top:10, right:10, bottom:20, left:60};

    //subtract margins
    width  = width  - margin.left - margin.right;
    height = height - margin.top  - margin.bottom;

    //sort data from highest to lowest
    info = info.sort(function(a, b){ return b.value - a.value; });

    //Sets the y scale from 0 to the maximum data element


    var max_n = 0;
    var category = []
            for (var d in info) {
                max_n = Math.max(info[d].value, max_n);
                category.push(info[d].name)
            }

            var dx = width / max_n;
            var dy = height / info.length;

   var y =   d3.scale.ordinal()
                        .domain(category)
                .rangeRoundBands([0, height], .1);

    var x = d3.scale.linear()
           .range([0, width]);


    var yAxis = d3.svg.axis()
                .scale(y)
                .orient('left')

    var svg = d3.select("#chart")
        .append("svg")
        .attr("width", "100%")
        .attr("height", "100%")
        .attr('preserveAspectRatio', 'xMidYMin')
        .attr("viewBox", '0 0 ' + parseInt(width + margin.left + margin.right) + ' ' + parseInt(height + margin.top + margin.bottom))
        .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

   svg.selectAll(".bar")
                .data(info)
                .enter()
                .append("rect")
                .attr("class", function(d, i) {return "bar" + d.name;})
                .attr("x", function(d, i) {return 0;})
                .attr("y", function(d, i) {return dy*i;})
                .attr("width", function(d, i) {return dx*d.value})
                .attr("height", dy)
                .attr("fill", function(d, i){
                  if(d.name == 'Walnuts') {return 'red'} else {return 'green'}
                                            });

       var y_xis = svg.append('g')
                          .attr('id','yaxis')
                          .call(yAxis);

        var lineEnd = 270;

        var line = d3.svg.line()
        line
    .x(function(d, i) { 
      return x(d.value) + i; })
    .y(function(d, i) { return lineEnd; }); 

    svg.append("path")
      .datum(info)
      .attr("class", "line")
      .attr("d", line);

Answer 1

这里不需要d3.svg.line()。只需创建一条简单的线:

    var lineEnd = 270;

    var line = svg.append("line")
      .attr("x1", lineEnd)
      .attr("x2", lineEnd)
      .attr("y1", 0)
      .attr("y2", height)
      .attr("stroke-width", 8)
      .attr("stroke", "black")
      .attr("stroke-dasharray", "8,8");

这是 plunker:http://plnkr.co/edit/dOhZjRvBHzFqWFByerKH?p=preview

PS:这不是 x 轴上的 270，这只是 SVG 上的 270px。现在你不能使用 x 作为尺度，因为没有域。为 x 设置域并使用它来设置条形宽度。

首先，摆脱这个:

    var max_n = 0;
var category = []
        for (var d in info) {
            max_n = Math.max(info[d].value, max_n);
            category.push(info[d].name)
        }

        var dx = width / max_n;
        var dy = height / info.length;

现在，设置比例:

var y = d3.scale.ordinal()
        .domain(info.map(function(d){ return d.name}))
        .rangeRoundBands([0, height], .1);

var x = d3.scale.linear()
       .range([0, width])
       .domain([0, d3.max(info, function(d){return d.value})])

然后将这些比例用于您的酒吧:

.attr("x", 0)
.attr("y", function(d){ return y(d.name)})
.attr("width", function(d) {return x(d.value)})
.attr("height", y.rangeBand())

所有这些都更正后，现在我们可以在比例中使用 270:

var line = svg.append("line")
      .attr("x1", function(){ return x(lineEnd)})
      .attr("x2", function(){ return x(lineEnd)})
      .attr("y1", 0)
      .attr("y2", height)
      .attr("stroke-width", 6)
      .attr("stroke", "black")
      .attr("stroke-dasharray", "8,8")

这是更新的插件:http://plnkr.co/edit/gtPA12qSf9mBoAY6MeDd?p=preview