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;您需要使用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。

D3更新共生图表中的颜色

1 个答案: