Question

我正在使用d3 js库创建Area图表。

绘制没有线条的区域图表但是，需要输入如何绘制线条以分隔区域。

我能想到的一种方法是使用以下方法逐行绘制线条，其中x1 = x2，y1 = 0且y2 = xy绘制点

svg.append("line")
            .data(data)
        .style("stroke", "#e6e3e3")
        .attr("x1", 30)
        .attr("y1", 0)
        .attr("x2", 30)
        .attr("y2", 40);

需要以下几点的帮助。 1.如果有办法一次绘制线条（使用函数）。 2.如果分别绘制线条（如上所述），如何在给定下面的数据集的情况下计算X轴和Y轴。

var data = [
    {"quarter": "A", "totalIncome": 60 },
    {"quarter": "B", "totalIncome": 70 },
    {"quarter": "C", "totalIncome": 60 },
    {"quarter": "D", "totalIncome": 80 },
    {"quarter": "E", "totalIncome": 75 }
];

Answer 1

我会做这样的事情：

如果你有点使路径在顶部如此：

var points = { x:0,y:60},{x:50,y:70},{x:100,y:60}.. and so on

你有关于垂直线问题的数据。我会为你想要创建的5行创建一个新数组：

var newLineData = [];
for(i=0;i<data.length;i++){
var thisLine = { x1:i*step,y1:0, x2:i*step,y2:data[i].totalIncome };

newLineData.push(thisLine); //line data

}

然后使用此数据创建如下行：

var link = svg.selectAll(".link")
      .data([newLineData])
    .enter().append("line")
      .attr("class", "link")
      .style('stroke','black')
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });
  //console.log(line);

  link.attr("x1", function(d) { console.log(d); return d.x1; })
        .attr("y1", function(d) { return d.y1; }) 
        //.attr("y1", function(d) { return x[d.y1]; }) if using axis : x is the axis
        .attr("x2", function(d) { return d.x2; })
        .attr("y2", function(d) { return d.y2; });

如果没有轴，它是如何工作的：https://jsfiddle.net/reko91/knetxt5n/

但是如果你像我上面所示那样通过了轴，那么你应该朝着正确的方向前进：）

如果JSFiddle失败，

下面的代码。

＆＃13;

var svg = d3.select('#container').append('svg')
  .attr('width', 500)
  .attr('height', 500)
  //.append('g')
    
var data = [
    {"quarter": "A", "totalIncome": 60 },
    {"quarter": "B", "totalIncome": 70 },
    {"quarter": "C", "totalIncome": 60 },
    {"quarter": "D", "totalIncome": 80 },
    {"quarter": "E", "totalIncome": 75 }
];

var newLineData = [];
var step = 50;
for(i=1;i<data.length+1;i++){
var thisLine = { x1:i*step,y1:0, x2:i*step,y2:data[i-1].totalIncome };

newLineData.push(thisLine); //line data

}


 var link = svg.selectAll(".link")
      .data(newLineData)
    .enter().append("line")
      .attr("class", "link")
      .style('stroke','black')
      .style("stroke-width", function(d) { return Math.sqrt(d.value); });
  //console.log(line);
  
  link.attr("x1", function(d) { console.log(d); return d.x1; })
        .attr("y1", function(d) { return d.y1; })
        .attr("x2", function(d) { return d.x2; })
        .attr("y2", function(d) { return d.y2; });

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div id='container'>

</div>

＆＃13;

绘制D3区域图

1 个答案: