d3.js強制定向交互式着色

我正在從this example工作的D3.js力指向圖。該示例根據一組組的成員資格爲節點着色。我的數據正常工作。但是，我的數據可以按多個節點屬性進行分組（例如按性別或按黨派隸屬關係）。簡單的解決方案是簡單地製作單獨的圖形，每個圖形根據不同的屬性進行着色。d3.js強制定向交互式着色

有沒有辦法讓配色方案成爲交互式（而不是硬編碼）？請問D3會添加一個下拉列表或按鈕來選擇使用哪個屬性（性別，隸屬關係）來爲節點着色？ This code允許用戶使用下拉菜單交互式地過濾他們的數據，但我不知道如何從中去交互式地選擇顏色使用的屬性。

來源

2016-09-01 kaz

您需要

建立的屬性一些顏色尺度和功能你要的顏色上
使用它們來生成相應的選項中選擇元素
然後再打一個小程序該recolours節點

https://jsfiddle.net/vbpqn1e6/

這是這樣的東西的悲慘例子，它可以被收拾了一下/很多，但給出了原則：

var groupColor = d3.scaleOrdinal(d3.schemeCategory20); 
var nameColor = d3.scaleLinear().domain([65,78,90]).range(["#f00", "#0f0", "#00f"]); 
var madameColor = d3.scaleLinear().domain([true, false]).range(["#f00", "#aaa"]); 

var colFuncs = { 
    "Group": function (d) { return groupColor (d.group); }, 
    "Name": function (d) { return nameColor (d.id.substring(0,1).toUpperCase().charCodeAt(0)); }, 
    "Madame?": function(d) { return madameColor (d.id.substring(0,2) === "Mm"); } 
}; 
var currentColFunc = colFuncs["Group"]; 

d3.select("body").insert("select", ":first-child") 
    .on ("change", function() { 
     var e = d3.event; 
     if (e) { 
     currentColFunc = colFuncs[e.target.value]; 
     updateColour(); 
     } 
    }) 
    .selectAll("option") 
    .data(d3.keys(colFuncs)) 
    .enter() 
    .append("option") 
    .attr("value", function(d) { return d; }) 
    .text (function(d) { return d; }) 
;

的.on("change")事件偵聽選擇元素，當選擇一個選項，使用該選項的值設置當前的Color方案（currentColFunc）。如果您想要更多選擇，只需在colFuncs對象中添加更多選項即可。

這是再updateColour使用：

function updateColour() { 
    node.attr("fill", function(d) { 
     return currentColFunc(d); 
    }); 
    }

來源

2016-09-02 09:43:01 mgraham

這是偉大的，但它打破我的傳說代碼。當配色方案執行時，如何更新圖例？ 'var legend = svg.selectAll（「。legend」）.data（currentColFunc.domain（））'不起作用（原因很明顯）。 – kaz

d3.js強制定向交互式着色

回答

相關問題