0

我正在尝试在 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 属性在记录 args 时不会在控制台中输出任何内容。

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

4

1 回答 1

1

听起来您想要做的是嵌套选择。您可能需要稍微重新格式化您的数据才能做到这一点，但是您应该能够传入不同行的数组数组并相应地附加每一行。文本标签以类似的方式工作。

文本标签对您不起作用的原因可能是因为您没有设置xandy属性（或者没有将它们设置为有效值）。

于 2013-03-11T18:19:48.223 回答