javascript - D3 折线图 - 无法显示线条

Question

我一直在构建 d3 条形图，但我一直困惑为什么我的折线图无法加载 - 抛出 Cannot read property 'length' of undefined d3 错误，所以我认为这是由于没有正确指向数据但不确定。我使用的数据是:

   var data = [   
        {month: "May", emailsDelivered: 20000, emailsOpened: 10000, emailsClicked: 7900},   
        {month: "Jun", emailsDelivered: 28000, emailsOpened: 11000, emailsClicked: 5900},   
        {month: "Jul", emailsDelivered: 30000, emailsOpened: 15000, emailsClicked: 2900},  
        {month: "Aug", emailsDelivered: 40000, emailsOpened: 8000, emailsClicked: 6900},   
        {month: "Sep", emailsDelivered: 30000, emailsOpened: 10000, emailsClicked: 7900},   
        {month: "Oct", emailsDelivered: 25000, emailsOpened: 10000, emailsClicked: 4900},  
        {month: "Nov", emailsDelivered: 30000, emailsOpened: 9000, emailsClicked: 5900},   
        {month: "Dec", emailsDelivered: 36000, emailsOpened: 2000, emailsClicked: 2900},   
        {month: "Jan", emailsDelivered: 41000, emailsOpened: 5000, emailsClicked: 1900},  
        {month: "Feb", emailsDelivered: 46000, emailsOpened: 7000, emailsClicked: 8900},   
        {month: "Mar", emailsDelivered: 38000, emailsOpened: 16000, emailsClicked: 4900},   
        {month: "Apr", emailsDelivered: 24000, emailsOpened: 10000, emailsClicked: 7900} 
    ]

这是我的其余代码。这是我第一次在 stackoverflow 上发帖，所以如果我的格式不好，我深表歉意。

var margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var xScale = d3.scale.ordinal()
    .rangeRoundBands([0, width], 0.2);

var yScale = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left")


var svg = d3.select("#emails_graph").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 + ")");

xScale.domain(data.map(function(d) { return d.month; }));
yScale.domain([0, d3.max(data, function(d) { return d.emailsDelivered; })]);


var line = d3.svg.line()
        .x(function(d, i) { return (xScale(i) + xScale.rangeBand() / 2); })
        .y(function(d){ return yScale(d); });

var lines = svg.selectAll("path.line")
        .data(data)
        .enter()
        .append("path")
            .attr("d", line(data.emailsDelivered))
            .attr("class", "line")
            .attr("fill", "none")
            .attr("stroke", "#888");

Answer 1

有几个问题正在发生。

首先，这是您的代码的工作 jsfiddle。 https://jsfiddle.net/28w8kk3u/

1. 您的意图是变量 data 包含单行的点，但是当您调用 .data(data) 时，d3 会看到一个包含 12 的数组单独的对象。您需要调用.data([data])。这样，d3 就会看到一个包含单个“对象”的数组，其中该单个对象中有 12 个数据点。

2. 需要告诉由 d3.svg.line() 创建的线条生成器如何从传入的对象中检索预期的 x 和 y 值。您试图通过

.x(function(d, i) { return (xScale(i) + xScale.rangeBand()/2); })

作为你的 x-accessor 函数。这对于 d3 来说没有意义，因为您创建了一个ordinal 比例尺，它将字符串映射到数字(例如，将 'Jan' 放入 xScale 中，它会返回 40 )。 xScale 需要您的月份名称，因此

.x(function(d) { return (xScale(d.month)); })

线发生器:

var line = d3.svg.line()
    .x(function(d) { return (xScale(d.month)); })
    .y(function(d){ return yScale(d.emailsDelivered); });

然后，要调用线条生成器，需要传入整个对象。

.attr("d", line)

上面是

的简写

.attr("d",function(d){
    return line(d)
})