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实际上是每个条的宽度，（但它已被设置为150而不是？）

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

每个条的宽度为20，每边的边距为5。因此，要计算偏移量，只需将条形码i与条形图的总宽度30相乘。

d3.js水吧台

1 个答案: