Question

我想创建一个线条图，其上还有带标签的点，类似于：我想使用2个不同的数据集，因为其中一个来自API。

以下是两个数据集：

Data set 1
09/01/17, 55.65
09/02/17, 63.88
09/03/17, 57.49
09/04/17, 58.59

Data set 2
09/01/17, 55.65, Label 1 here
09/02/17, 63.88, Label 2 here
09/03/17, 57.49, Label 3 here
09/04/17, 58.59, Label 4 here

这是我到目前为止所拥有的内容（from this tutorial）：

// Set the dimensions of the canvas / graph
var margin = {top: 30, right: 20, bottom: 30, left: 50},
width = 600 - margin.left - margin.right,
height = 270 - margin.top - margin.bottom;

// Parse the date / time
var parseDate = d3.time.format("%d-%b-%y").parse;

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

// Define the axes
var xAxis = d3.svg.axis().scale(x)
.orient("bottom").ticks(5);

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

// Define the line
var valueline = d3.svg.line()
.x(function(d) { return x(d.date); })
.y(function(d) { return y(d.close); });

// Adds the svg canvas
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.csv", function(error, data) {
data.forEach(function(d) {
    d.date = parseDate(d.date);
    d.close = +d.close;
});

// 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 d.close; })]);

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

// Add the scatterplot
svg.selectAll("dot")
    .data(data)
  .enter().append("circle")
    .attr("r", 3.5)
    .attr("cx", function(d) { return x(d.date); })
    .attr("cy", function(d) { return y(d.close); });

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

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

});

function addLabels(){
    d3.csv("dataset2.csv", function(error, data){
        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.data);
            }
        })
        .text(function(d, i) {
            return d.label;
        });
    });
}

addLabels();

问题：有人可以帮助我为此图表上的点添加标签吗？请记住，我使用的是两种不同的数据集。

Answer 1

好的，所以看起来你的当前函数是从dataset1创建散点图，我要做的是为标签添加第二个完全独立的函数：

function addLabels(){
d3.csv("dataset2.csv", function(error, data2){
svg.append('g')
.classed('labels-group', true)
.selectAll('text')
.data(data2)//this should have been data2, to reflect data coming from the second request.
.enter()
.append('text')
.classed('label', true)
.attr({
'x': function(d, i) {
return x(d.date);
},
'y': function(d, i) {
return y(d.data);
 }
})
.text(function(d, i) {
return d.label;
});
}
}

然后从绘制线的函数的末尾调用此函数（如果它开始减慢速度，使用计时器允许其余数据首先绘制）。感谢this other user标签代码。这就是我的想法，但更整洁。

编辑：我忘记更改正在使用的数据集，请参阅上面的评论。

使用2个不同的数据集创建带有点和标签的折线图

1 个答案: