格式化d3.js中的回調函數以在多重摺線圖上放置符號

Question

我正試圖在多折線折線圖上放置符號。在d3.js API reference，符號使用轉換功能定位：

vis.selectAll("path") 
    .data(data) 
    .enter().append("path") 
    .attr("transform", function(d) { return "translate(" + x(d.x) + "," + y(d.y) + ")"; }) 
    .attr("d", d3.svg.symbol()); 

不幸的是，我似乎無法應用此建立自己的函數（d）回調函數訪問d.date和幾個d.temperature套如下面示出和描述this example：

var cities = color.domain().map(function(name) { 
    return { 
     name: name, 
     values: data.map(function(d) { 
     return {date: d.date, temperature: +d[name]}; <-- stored in 'd.values' 
    }) 
};}); 

最好我可以想出通過試驗和錯誤是以下內容，其中我提供漫畫救濟：

for (i=0; i<cities[0].values.length; i++) // note: for comic relief only 
{ 
    vis.selectAll(".class") 
    .data(cities) 
    .enter().append("path") 
    .attr("transform", function(d) { return "translate(" + x(d.values[i].date) + "," + y(d.values[i].temperature) + ")"; }) 
    .attr("d", d3.svg.symbol()) 
} 

它實際上工作，我認爲這很有趣，但是我嘗試編寫一個正確的嵌套函數迄今爲止失敗了。例如，這給出了transform =「translate（NaN，NaN）」

.attr("transform", function(d) { return "translate(" + x(d.values, function(c) { return c.date}) + "," + y(d.values, function(c) { return c.temperature}) + ")"; }) 

我不理解什麼？任何援助將不勝感激。

Answer 1

在您的嘗試代碼中，您綁定的是data但我認爲您的意思是cities，對吧？鏈接到的示例中的data變量包含從TSV文件讀取的數據，因此它沒有values屬性。

cities變量指向一個嵌套數據結構，其中每個城市（系列）包含構成該行（值）的數據點列表。這種嵌套在創建路徑時非常方便，因爲每個城市都是單獨的路徑，路徑定義由值列表組成。但對於應用形狀，您不再有任何用於分組。您只需要一個值列表，以便您可以創建/定位每個值的形狀。

而不是嘗試從嵌套結構中提取值，它可能是最簡單的執行數據轉換以生成一個平坦的值列表。請注意，我把這個城市的名字到每一個節點，因爲你可能會想用這個來每個城市色彩或類型適用於您的形狀：

var values = []; 
cities.forEach(function(city) { 
    city.values.forEach(function(v) { 
     values.push({ 
      date: v.date, 
      temperature: v.temperature, 
      city: city.name 
     }); 
    }); 
}); 

然後，你可以簡單地使用這個數組來創建形狀。每個值都包含您需要將其放置到正確位置的所有信息。爲了從你的問題複製一些代碼：

vis.selectAll("path") 
    .data(values) 
    .enter().append("path") 
    .attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d.temperature) + ")"; }) 
    .attr("d", d3.svg.symbol()); 

這將創建所有相同的形狀，但如上所述，您可以使用d.city更改符號類型或描邊顏色。您可以使用簡單的序號比例或顏色比例作爲域名來執行此操作。

**編輯： 按您的評論使用的分組數據結構，而不進一步轉變表達做到這一點的願望，這裏是一個辦法做到這一點在一個循環中具有多個數據連接：

for (i=0; i < cities.length; i++) { 
    vis.selectAll(".class") 
     .data(cities[i].values) 
     .enter().append("path") 
      .attr("transform", function(d) { return "translate(" + x(d.date) + "," + y(d.temperature) + ")"; }) 
      .attr("d", d3.svg.symbol()) 
}