数据未定义对象类型的 d3

Question

我正在修改由 Matthew Weber (link 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>

你会看到一些东西。不确定这是否是您要找的全部。当我说“我猜你还没有更新页面的 html（特别是 #menu select 元素）以匹配你的数据时，这就是我在评论中所怀疑的。”

您可能希望反过来，您的 "Select series:" 组合框是 [Model1, Model2, Model3, Model4] 并且您的图表有 9 行 dma1 到 dma9，但从你的代码来看，你的意图似乎和我一样。

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

数据未定义对象类型的 d3

data not defined d3 for object type

javascript

d3.js