如何在D3中的水平條形圖上的X軸上添加一條線

Question

我想在水平條形圖上添加一條類似於圖像的線，在這種情況下，該線應在x軸上表示270，但出現錯誤無效路徑屬性。 這是代碼代碼：

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

這是the人： 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