Question

我使用类似于http://bl.ocks.org/mbostock/3884955的折线图并使用它而没有太多问题。我的图表显示了受众的实时得分数据（每个参与者都有自己的行）。

现在，我还允许参与者在他们得分的事件中添加评论。此事件应显示为该行上的小圆圈。管理员可以通过评论获得工具提示。

我尝试完全独立处理线条和圆圈但遇到颜色问题（线条和圆圈没有匹配的颜色）以及我使用基础插值的事实

var line = d3.svg.line()
.interpolate("basis")
.x(function(d) { return x(d.time); })
.y(function(d) { return y(d.status); });

因此，在“真实”x和y值上的圆被绘制在曲线之外（插值）。

所以，我需要使用一个看起来像这样的单个数据集

data = [
    {time: 1, score: 40},
    {time: 2, score: 30},
    ...
    {time: 345, score : 70, comment: great connection to the market data},
    {time: 346, score : 70}
    ....
]

任何人都可以帮忙，因为我现在已经迷失了3天

欢呼声彼得

Answer 1

您可以使用d3.color类型。这是折线图的工作小提琴，包括基本插值，数据点和工具提示。 jsFiddle

对于数据点： -

var circles = activityLine.selectAll("circle")
    .data(function(d) {        
        return(d.values);
    })
    .enter().append("circle")
    .attr("stroke", function(d, i) {
        if(d.values[i])
            return color(d.values[i].activity);
    })
    .attr("cx", function(d) {
        return x(dateFormat.parse(d.key));


    })
    .attr("cy", function(d) {
        return y(d.values.length);
    })    
    .attr("stroke-width", 4.8)
    .attr("fill", "white")
    .attr("r", 6)
    .attr("stroke-opacity", 0.0001)
    .attr("fill-opacity", 0.0001);

对于工具提示： -

 circles.append("title")
    .text(function(d,i){        
      return d.values[i]!=undefined?d.values[i].activity:"text";
    });

D3js和特定数据点显示为小圆圈

1 个答案: