自定义图形属性/对象一致性

Question

我有一个关于选择节点以根据其 name/id/title 更改某些属性的问题。尽管我花了很多时间试图理解有关该主题的文档 (Link)，但我仍然不知道如何根据可访问的预渲染数据更改节点的颜色。这可能只是因为我对 JavaScript 和 D3 还很陌生，所以我猜想解决方案会很简单。

最后我想按顺序改变节点的颜色来模拟令牌通过，即

第一次点击： 节点 a -> 红色

第二次点击： 节点 b -> 红色，节点 a -> 再次为白色

第三次点击：所有节点再次变白

JSFiddle

// render initial graph
d3.select("#graph").graphviz()
    .engine("neato")
    .dot(`digraph {a -> b}`)
    .render();

// on click, change color of 
d3.select("#graph").on("click", function () {
        console.log("click");
    /* here I would want to select manipulate a node based on its title (a or b)
       and not the ID of the group, since "id=node1" is not known before 
       rendering */
    d3.selectAll("#node1").select("ellipse").transition().attr("fill", "red");
});

Answer 1

d3 背后的想法是将数据分配给节点，您可以通过函数访问这些节点，然后 returns 属性或样式的新值。在每种情况下，第一个参数 d 是基准对象，第二个是选择中的索引，（如果我没记错的话）第三个是整个选择。

在这种情况下，您可以通过将 d 的内容打印到控制台来查看它们，因为 graphviz 在 d3 周围添加了一个抽象层。从那里，我发现 d.parent.key 实际上是我需要的值，所以我可以用它来访问 highlightSequence。我将它存储在一个列表中，这样我就可以轻松地循环浏览它们，如果我愿意的话。

// render initial graph
d3.select("#graph").graphviz()
  .engine("neato")
  .dot(`digraph {a -> b}`)
  .render();

const highlightSequence = [
  { a: 'red', b: 'white' },
  { a: 'white', b: 'red' },
  { a: 'white', b: 'white' }
];
let counter = -1;

// on click, change color of 
d3.select("#graph").on("click", function() {
  console.log("click");
  counter++;
  d3.selectAll("ellipse")
    .attr("fill", function(d) {
      console.log(d);
      return highlightSequence[counter % highlightSequence.length][d.parent.key];
    });
});

<html>

<body>
  <script src="//d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script>
  <script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script>
  <div id="graph" style="text-align: center;"></div>
</body>

</html>

编辑使其更具可扩展性，仅定义白色以外的颜色并默认为：

// render initial graph
d3.select("#graph").graphviz()
  .engine("neato")
  .dot(`digraph {a -> b}`)
  .render();

const highlightSequence = [
  { a: 'red' },
  { b: 'red' },
  { }
];
let counter = -1;

// on click, change color of 
d3.select("#graph").on("click", function() {
  console.log("click");
  counter++;
  d3.selectAll("ellipse")
    .attr("fill", function(d) {
      console.log(d);
      return highlightSequence[counter % highlightSequence.length][d.parent.key] || 'white';
    });
});

<html>

<body>
  <script src="//d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/@hpcc-js/wasm@0.3.11/dist/index.min.js"></script>
  <script src="https://unpkg.com/d3-graphviz@3.0.5/build/d3-graphviz.js"></script>
  <div id="graph" style="text-align: center;"></div>
</body>

</html>

自定义图形属性/对象一致性

Customizing Graph Attributes / Object Consistency

javascript

graphviz

d3.js