Question

我正在修改Matthew Weber制作的交互式图表（链接here），当我尝试创建一个唯一的键将数据绑定到的时候，我一直遇到错误，我的数据没有定义图形。我一直收到错误

TypeError: data is undefined

我认为问题源于这样一个事实，即我使用数值（年龄）作为x轴，而不是从他的示例中解析日期，但我无法弄清楚要修改它的内容。

我还在它上面的几行中声明了数据变量，而d3似乎没有认出它。

我的代码如下。

代码段:(错误发生在“color.domain”开头）

        var menu = d3.select("#menu select")
    .on("change", change);    

//suck in the data, store it in a value called formatted, run the redraw function
// *****
d3.csv("data.csv", function(data) {
                                    formatted = data;
                                    redraw();
                                  });

d3.select(window)
    .on("keydown", function() { altKey = d3.event.altKey; })
    .on("keyup", function() { altKey = false; });
var altKey;

// set terms of transition that will take place
// when a new economic indicator is chosen   
function change() {
  d3.transition()
      .duration(altKey ? 7500 : 1500)
      .each(redraw);
}

// all the meat goes in the redraw function
function redraw() { 

    // create data nests based on economic indicator (series)
    // *****
    var nested = d3.nest()
        .key(function(d) { return d.dma; })
        .map(formatted)

    // get value from menu selection
    // the option values are set in HTML and correspond
    //to the [type] value we used to nest the data  
    var series = menu.property("value");

    // only retrieve data from the selected series, using the nest we just created
    var data = nested[series];

    // for object constancy we will need to set "keys", one for each type of data (column name) exclude all others.
    // *****
    color.domain(d3.keys(data[0]).filter(function(key) { return (key !== "age" && key !== "dma"); }));
    // *****
    var linedata = color.domain().map(function(name) {
                    return {name: name,
                            values: data.map(function(d) {
                            return {name:name, age: d.age, value: parseFloat(d[name],10)};
                            })
                    };
    });

Answer 1

问题在于：

var data = nested[series];

series设置为turnout，因为这是#menu select元素的默认值。

我认为您可能希望进行以下更改...

更改

<p id="menu" class="menuchoice">Select series: <select>
<option value="turnout">Model 1</option>
 <option value="unsure">Model 2</option>
<option value="fiscal">Model 3</option>
 <option value="social">Model 4</option>

为：

<p id="menu" class="menuchoice">Select series: <select>
<option value="dma1">DMA 1</option>
<option value="dma2">DMA 2</option>
<option value="dma3">DMA 3</option>
<option value="dma4">DMA 4</option>
<option value="dma5">DMA 5</option>
<option value="dma6">DMA 6</option>
<option value="dma7">DMA 7</option>
<option value="dma8">DMA 8</option>
<option value="dma9">DMA 9</option>

</select>

你会得到一些东西。不确定这是否是您正在寻找的。这是我在评论中所怀疑的，当我说＆＃34;我猜您还没有更新页面的html（特别是#menu select元素）以匹配您的数据。＆＃34;

你可能想要反过来，用你的＆＃34;选择系列：＆＃34;组合框为[Model1, Model2, Model3, Model4]，而您的图表有9行dma1到dma9，但是从您的代码中看起来就像我预期的那样。

如果相反，您将不得不更改nested参数并再次更新html元素的#menu select。< / p>

数据未定义d3表示对象类型

1 个答案: