如何在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，這簡直是270px對SVG。現在你不能使用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") 

這裏是更新plunker：http://plnkr.co/edit/gtPA12qSf9mBoAY6MeDd?p=preview