D3：将数据值标签添加到多线图 [英] D3: Add data value labels to multi line graph

问题描述

我使用这个多线图，但到目前为止，没有在每个tick（每一天）生成数据值标签。

I am using this multiline graph but so far have failed to generate data value labels on every tick (for every day).

<script>

var margin = {top: 30, right: 40, bottom: 30, left: 50},
    width = 600 - margin.left - margin.right,
    height = 270 - margin.top - margin.bottom;

var parseDate = d3.time.format("%d-%m-%y").parse;

var x = d3.time.scale().range([0, width]);
var y = d3.scale.linear().range([height, 0]);

var xAxis = d3.svg.axis().scale(x)
    .orient("bottom").ticks(7);

var yAxis = d3.svg.axis().scale(y)
    .orient("left").ticks(7);

var valueline = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.sev3); });

var valueline2 = d3.svg.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.sev4); });

var svg = d3.select("body")
    .append("svg")
        .attr("width", width + margin.left + margin.right)
        .attr("height", height + margin.top + margin.bottom)
    .append("g")
        .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

// Get the data
d3.csv("data.tsv", function(error, data) {
    data.forEach(function(d) {
        d.date = parseDate(d.date);
        d.sev3 = +d.sev3;
        d.sev4 = +d.sev4;
    });

    // Scale the range of the data
    x.domain(d3.extent(data, function(d) { return d.date; }));
    y.domain([0, d3.max(data, function(d) { return Math.max(d.sev3, d.sev4); })]);

    svg.append("path")      // Add the valueline path.
        .attr("class", "line")
        .attr("d", valueline(data));

    svg.append("path")      // Add the valueline2 path.
        .attr("class", "line")
        .style("stroke", "red")
        .attr("d", valueline2(data));



    svg.append("g")         // Add the X Axis
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

    svg.append("g")         // Add the Y Axis
        .attr("class", "y axis")
        .call(yAxis);

    svg.append("text")
        .attr("transform", "translate(" + (width+3) + "," + y(data[0].sev4) + ")")
        .attr("dy", ".35em")
        .attr("text-anchor", "start")
        .style("fill", "red")
        .text("Sev4");

    svg.append("text")
        .attr("transform", "translate(" + (width+3) + "," + y(data[0].sev3) + ")")
        .attr("dy", ".35em")
        .attr("text-anchor", "start")
        .style("fill", "steelblue")
        .text("Sev3");



});

</script>

Data.tsv

date,sev3,sev4
20-02-15,0,0
19-02-15,0,0
18-02-15,0,0
17-02-15,481,200
16-02-15,691,200
15-02-15,296,200
14-02-15,307,200

上面的代码给出：

The code above gives this:

这是我正在尝试完成的

And THIS is what i am trying to accomplish

我理解我必须使用.append（text）并将文本放置在与数据大约相同的x，y坐标点，并从数据中拉取值，以进入文本，但我有困难整合该概念。

I understand that i must use .append("text") and position the text at about the same x,y coords as the data point and pull the value from the data to feed into the "text" but i am having difficulties in integrating that concept.

我怀疑选择将发生与valueline。附加？我看过一个HEAP的例子，我不知道有数据值标签的线条存在，如果它确实请指出它：）

I suspect that the selection would occur with valueline.append ? I have looked at a HEAP of examples, i dont thing a linegraph with data value labels exists, if it does please point me to it :)

任何想法？ p>

Any thoughts ?

推荐答案

您的文本将不会显示，因为它位于您的svg的边界之外：您添加了一个翻译的边.left，并将你的x放在宽度+ 3，这意味着位于你的svg左边框的宽度+ 3 + margin.left。

Your text will not be visible, as it is located outside the boundaries of your svg: you added a group that is translated of margin.left, and the put your x at width+3, which means located at width+3+margin.left of the left border of your svg.

附加文本：

svg.append("text")
    .attr("transform", "translate(" + (width/2) + "," + y(data[0].sev4) + ")")
    .attr("dy", ".35em")
    .attr("text-anchor", "start")
    .style("fill", "red")
    .text("Sev4");

svg.append("text")
    .attr("transform", "translate(" + (width/2) + "," + y(data[0].sev3) + ")")
    .attr("dy", ".35em")
    .attr("text-anchor", "start")
    .style("fill", "steelblue")
    .text("Sev3");

我没有测试，所以我不能保证，但你的代码看起来不错，这是唯一的事情我看到了。

I did not test it, so I cannot guarantee, but your code seems fine, that's the only thing I see.

此添加的结果：

EDIT

澄清后，这里是一个plunk： http://plnkr.co / edit / lDlseqUQQXgoFwTK5Aop？p =预览

After your clarifications, here is a plunk: http://plnkr.co/edit/lDlseqUQQXgoFwTK5Aop?p=preview

您会感兴趣的部分是：

svg.append('g')
.classed('labels-group', true)
.selectAll('text')
.data(data)
.enter()
.append('text')
.classed('label', true)
.attr({
  'x': function(d, i) {
    return x(d.date);
  },
  'y': function(d, i) {
    return y(d.sev3);
  }
})
.text(function(d, i) {
  return d.sev3;
});

这将绘制您的标签。这是你尝试实现的结果吗？

This will draw your labels. Is it the result you try to achieve?

这篇关于D3：将数据值标签添加到多线图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！