D3更新同現表中的顏色

Question

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

我目前正在嘗試從D3 Les Miserables演示中重新創建同現矩陣。

我能夠在“訂單”下拉列表中添加更多變量，並且我目前正在嘗試添加代碼以更改顏色。

當前設置默認為“ 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; 您需要使用方括號表示法訪問屬性。 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;
    })
});

這里的例子。