javascript - 向 D3 行添加标签

Question

我想添加在折线图上显示值的标签，但不知道该怎么做。

var svg = d3.select('svg')
      .attr("width", width)
      .attr("height", height);

  var g = svg.append("g")
      .attr("transform", "translate(" + 0 + "," + 0 + ")");

  var x = d3.scaleTime()
      .rangeRound([0, width]);

  var y = d3.scaleLinear()
      .rangeRound([height, 0]);

  var line = d3.line()
      .x(function(d) { return x(d.date)})
      .y(function(d) { return y(d.value)})
      x.domain(d3.extent(data, function(d) { return d.date }));
      y.domain(d3.extent(data, function(d) { return d.value }));

我不知道如何添加标签，例如这里(虽然我的情况更简单，因为我只有一个图表)

Answer 1

我在这里生成了一些随机数据。添加文本标签的相关代码:

g.selectAll('.textLabels')
.data(data).enter()
.append('text')
.classed('textLabels', true)
.attr('x', function(d) { return x(d.date); })
.attr('y', function(d) { return y(d.value); })
.text(function(d) { return d.value; });

根据数据数组中的 x(日期)和 y(值)值定位。您可以使用 dx、dy 属性调整偏移量，并使用一些样式来填充/描边 文本。

var data = [];

function randomDate(start, end) {
	return new Date(start.getTime() + Math.random() * (end.getTime() - start.getTime()));
}

for(var i=0; i<20; i++) {
		var obj = {};
    obj.date = randomDate(new Date(2018, 01,01), new Date());
    obj.value = Math.floor(Math.random() * 50);
    data.push(obj);
}
data.sort(function(a, b) {
	return a.date > b.date ? -1 : 1;
})

var width = 800, height = 400;
var svg = d3.select('svg')
    .attr("width", width)
    .attr("height", height);

var g = svg.append("g")
    .attr("transform", "translate(" + 0 + "," + 0 + ")");

var x = d3.scaleTime()
    .rangeRound([0, width]);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var line = d3.line()
    .x(function(d) {
        return x(d.date)
    })
    .y(function(d) {
        return y(d.value)
    })
x.domain(d3.extent(data, function(d) {
    return d.date
}));
y.domain(d3.extent(data, function(d) {
    return d.value
}));

g.append("path")
    .datum(data)
    .attr("fill", "none")
    .attr("stroke", "steelblue")
    .attr("stroke-linejoin", "round")
    .attr("stroke-linecap", "round")
    .attr("stroke-width", 1.5)
    .attr("d", line);
    
g.selectAll('.textLabels')
	.data(data).enter()
  .append('text')
  .classed('textLabels', true)
  .attr('x', function(d) { return x(d.date); })
  .attr('y', function(d) { return y(d.value); })
  .text(function(d) { return d.value; });

<script src="https://d3js.org/d3.v4.min.js"></script>


<svg></svg>

如果您有任何问题，请告诉我。希望这有帮助。:)