d3.js水柱圖

Question

我正在嘗試修復此含水條形圖，以便它可以處理動態數據集-http://jsfiddle.net/NYEaX/1855/

標簽位置和調整線條的寬度/高度時遇到問題。

    var lineHeights = 100;

    //__ labels
    var labels = labelsholder.selectAll("text")
      .data(data);

    labels.enter()
      .append("text")
      .attr("class", "barlabels")
      .attr("x", 200)
      .attr("y", function(d, i) {
        return lineHeights - (20 * i);
      })
      .text(function(d) {
        return d.label;
      })

    var lines = lineholder.selectAll("line")
      .data(data);

//horizontal


    lines.enter()
      .append("line") // attach a line
      .style("stroke-dasharray", ("3, 3"))
      .style("stroke", "black") // colour the line
      .attr("x1", function(d, i) {
        return barWidth - 100/(i+1);
      }) //x pos of the 1st end of the line
      .attr("y1", function(d, i) {
        return lineHeights - (20 * i);
      }) //y pos of the 1st end of the line
      .attr("x2", function(d, i) {
        return barWidth;
      }) //x pos of the 2nd end of the line
      .attr("y2", function(d, i) {
        return lineHeights - (20 * i);
      }); //y pos of the 2nd end of the line



//verticals

    lines.enter()
      .append("line") // attach a line
      .style("stroke-dasharray", ("3, 3"))
      .style("stroke", "black") // colour the line
      .attr("x1", function(d, i) {
        return 30 * i;
      }) //x pos of the 1st end of the line
      .attr("y1", function(d, i) {
        return lineHeights - (20 * i);
      }) //y pos of the 1st end of the line
      .attr("x2", function(d, i) {
        return 30 * i;
      }) //x pos of the 2nd end of the line
      .attr("y2", function(d, i) {
        return -15;
      }); //y pos of the 2nd end of the line

Answer 1

這是工作中的JSFiddle： http : //jsfiddle.net/NYEaX/1860/

在添加水平線的地方，您使用的是barWidth - 100/(i+1); 確定x軸。 如果barWidth實際上是每個條形的寬度，那將是barWidth （但是它已被設置為150？）

     .attr("x1", function(d, i) {
        return (i * 30);

每個條的寬度為20 ，每邊的邊距為5 。 因此，要計算偏移量，只需將鋼筋編號i乘以鋼筋的總寬度30 。