D3.js〜放置矩形與for循環和着色它們

我需要設置散點圖的顏色圖例。我已經設置了比例尺，並且它正在散點圖上的點上工作，但是現在我想要做的是爲每種顏色繪製一個小方塊，並用顏色本身填充以顯示圖的圖例。像這樣的事情在我的圖形開始： enter image description here D3.js〜放置矩形與for循環和着色它們

我試圖建立功能相應地拉攏他們，但失敗了，這裏是我的嘗試：

var colore = d3.scale.ordinal() 
    .domain(d3.extent(dataset, function (d) { return d.Peso; })) 
    .range(["#fee0d2","#fcbba1","#fc9272","#fb6a4a","#ef3b2c","#cb181d","#a50f15","#67000d"]);

，並提請平方功能：

svg.selectAll("rect") 
    .data(colore.range()) 
    .enter() 
    .append("rect") 
    .attr("fill", function (i) { return colore(i); }) 
    .attr("x", function (i) {for (i=1; i <= colore.range().length; i++) 
     { return (i * 12) + "px"; } 
     }) 
    .attr("y", margin - 8 + "px") 
    .attr("width", 8 + "px") 
    .attr("height", 8 + "px");

這追加到SVG元件8米的正方形，但堆疊到海誓山盟，像這樣（紅色的）： enter image description here

所以我不知道如何糾正我的功能，我認爲這是錯誤發生的地方。預先感謝任何幫助！

來源

2013-11-27 tomtomtom

問題是你沒有使用綁定到每個矩形的data，而是每次循環遍歷所有的顏色。嘗試是這樣的：

svg.selectAll("rect") 
    .data(colore.range()).enter() 
    .append("rect") 
    .attr("fill", function (color){ return color; }) 
    .attr("x", function (color, index){ return (index * 12) + "px"; }) 
    .attr("y", margin - 8 + "px") 
    .attr("width", 8 + "px") 
    .attr("height", 8 + "px");

要注意的關鍵問題是，如果你可以傳遞一個屬性的函數，它接受一個對象和索引，然後將獲得應用到每個數據參數。使用這種方法，我得到這個：

example output

來源

2013-11-27 18:05:07 mdml

我解決了它，正要刪除它，我並不需要使用for循環，因爲我已經擁有的數據陣列，現在編輯答案 – tomtomtom

@tomtomtom：你總是可以回答自己的問題，以便以後如果其他人有相同的問題，他們可以看到答案。或者，如果我的解決方案也適用於你，你可以upvote /接受，以及:) – mdml

好，沒關係我會接受你的正確，這個編輯是有效的！謝謝：） – tomtomtom

D3.js〜放置矩形與for循環和着色它們

回答

相關問題