Question

我正在使用D3.js强制导向图的this example工作。该示例根据一组组的组成员身份为节点着色。我的数据运行正常。但是，我的数据可以分组在多个节点属性上（例如，按性别或通过党派关系）。简单的解决方案是简单地制作单独的图形，每个图形根据不同的属性着色。

有没有办法让配色方案互动（而不是硬编码）？ D3会让我添加一个下拉列表或按钮来选择使用哪个属性（性别，隶属关系......）为节点着色？ This code允许用户使用下拉菜单以交互方式过滤他们的数据，但我不确定如何从交互式选择要用于颜色的属性。

Answer 1

你需要

为您想要在其上着色的属性构建一些色阶和功能
使用它们生成具有适当选项的选择元素
然后调用一个重新组合节点的小例程

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")事件侦听select元素，选择选项时使用该选项的值来设置当前的颜色方案（currentColFunc）。如果您想要更多选择，只需向colFuncs对象添加更多内容。

然后在updateColour中使用它：

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

d3.js强制指导群组的交互式着色

1 个答案: