Question

我正在尝试使用多个线路路径在D3中制作时间顺序折线图。我想将文本标签应用于这些路径。

我目前正在做的是使用效用函数根据数据的属性（d3.svg.line的值来生成多个plotProps元素，这些是我的json数据中的键。）

function makeLine(prop){
         return d3.svg.line()
            .x(function(d){ return x(d.date); })
            .y(function(d){ return y(d[prop]); });

    }

var plotProps = ['registered','subscribers','total','anonymous'];

 plotProps.forEach(function(prop){
        line = makeLine(prop);
        svg.append("path")
          .datum(graph_data)
          .attr("class", "line datapath")
          .attr("d", line)
          .attr('prop',prop)
          .style('text-anchor','middle');

      svg.append('svg:text')
        .attr('class','label')
        .attr("y", "")
        .attr("x", "")
        .attr("dy", ".71em")
        .style("text-anchor", "end")
        .text('foobar');

    });

我的方法对于d3的数据连接方法感觉非常违反直觉，因为如果数据源是动态的，我的行生成是不兼容的。我似乎也无法使标签正确显示。大多数示例使用添加到g元素的标签 - 我应该将它们添加到我的案例的路径中（只是每行上面的文本）？将函数传递给我附加的文本元素的x，y attrs在记录args时在控制台中不输出任何内容。

有没有办法生成多行来允许我链接这些标签调用？我希望我已经足够清楚了。

Answer 1

听起来你想做的是nested selections。您可能需要稍微重新格式化数据才能执行此操作，但是您应该能够为不同的行传入数组数组并相应地追加每一行。文本标签以类似的方式工作。

文本标签不适合您的原因可能是因为您没有设置x和y属性（或者不是将它们设置为有效值）。

d3带标签的多行

1 个答案: