javascript - D3 更新共现图中的颜色

Question

https://hansardbrowser.s3.amazonaws.com/Cooccurmatrix/index%20%2812.12.2015%207.43.36%20PM%29.html

我目前正在尝试重新创建 D3 悲惨世界演示中的共现矩阵。

我可以向“顺序”下拉列表添加更多变量，并且我目前正在尝试添加代码来更改颜色。

当前设置默认为“party”作为颜色选项，但如何将新的 coloroption 值插入到 .style 代码中并刷新？

原始分组更改代码:

d3.select("#order").on("change", function() {
clearTimeout(timeout);
order(this.value);
});

  function order(value) {
    x.domain(orders[value]);

var t = svg.transition().duration(2500);

t.selectAll(".row")
    .delay(function(d, i) { return x(i) * 4; })
    .attr("transform", function(d, i) { return "translate(0," + x(i) + ")"; })
  .selectAll(".cell")
    .delay(function(d) { return x(d.x) * 4; })
    .attr("x", function(d) { return x(d.x); });

t.selectAll(".column")
    .delay(function(d, i) { return x(i) * 4; })
    .attr("transform", function(d, i) { return "translate(" + x(i) + ")rotate(-90)"; });
  }

我尝试添加颜色更改功能(抱歉，我对 D3 和 javascript 非常陌生)

d3.select("#coloroption").on("change", function() {
coloroption(this.value);
});
function coloroption(value) {
 var cell = d3.select(this).selectAll(".cell")
    .data(row.filter(function(d) { return d.z; }))
    .enter().append("rect")
    .attr("class", "cell")
    .attr("x", function(d) { return x(d.x); })
    .attr("width", x.rangeBand())
    .attr("height", x.rangeBand())
    .style("fill-opacity", function(d) { return z(d.z); })
    .style("fill", function(d) { return nodes[d.x].(coloroption[value]) == nodes[d.y].(coloroption[value])  ? c(nodes[d.x].(coloroption[value]) ) : null; })
    //.on("mouseover", mouseover)
   // .on("mouseout", mouseout);
   }

不确定这是否是我应该处理这个问题的正确方法

Answer 1

此 .(coloroption[value]) 不是有效的 javascript；您需要使用 bracket notation 访问属性。其中的 d3 部分是一个简单的 .selectAll，但样式发生了变化:

d3.select("#coloroption").on("change", function() {
  // get selected value from dropdown
  var opt = this.options[this.selectedIndex].value;
  svg.selectAll(".cell")
    .style("fill", function(d){
      // get it by bracket notation
      return nodes[d.x][opt] == nodes[d.y][opt]  ? c(nodes[d.x][opt]) : null;
    })
});

示例 here .