设置D3力有向图 [英] Setting up D3 force directed graph

问题描述

向尊敬的读者。我是javascript的合理新，我遇到这个问题。我正试图实现此强制定向图的修改版本：

To the esteemed readers. I'm reasonably new in javascript and I have come across this problem. I'm trying to implement a modified version of this force directed graph:

http://mbostock.github.com/d3/ex/force.html

生成json数据从php脚本。其想法是将连接到一个特定节点（在php脚本中定义）的所有线颜色设置为一种颜色，而所有其他节点以灰色阴影着色。我试图做到这一点，通过匹配json文件中的源变量与变量从php脚本和更改颜色，当这是真实的：

The json data is generated on the fly from a php script. The idea is to color all lines connecting to one specific node ( defined in a php script) in one color and all the others in shades of gray. I'm attempting to do it by matching the source variable in the json file to the variable from the php script and changing color when that is true like this:

  var link = svg.selectAll("line.link")
  .data(json.links)
  .enter().append("line")
  .attr("class", "link")
  .style("stroke-width", function(d) { return Math.sqrt(d.value);})
  .style("stroke-opacity", function(d) { return d.value/10;})
  .style("stroke", function(d) { 
  x = (tested == d.source) ?  return '#1f77b4' : '#707070';// <-- Attempt to change the color of the link when this is true.
  })

但这不起作用。

  var link = svg.selectAll("line.link")
  .data(json.links)
  .enter().append("line")
  .attr("class", "link")
  .style("stroke-width", function(d) { return Math.sqrt(d.value);})
  .style("stroke-opacity", function(d) { return d.value/10;})
  .style("stroke", function(d) { 
  return '#707070';
  })

我一直在盯着这几天试图找出这个完成，我被卡住了。

I've been staring at this for days trying to figure out to get this done and I'm stuck. Any help would be greatly appreciated!!

以下是我的完整脚本

<script type="text/javascript">

var width = 1200,
    height = 1200;

var color = d3.scale.category20();

var tested=<?php echo $tested_source;?>; //<-- the variable from php

var svg = d3.select("#chart").append("svg")
    .attr("width", width)
    .attr("height", height);

d3.json("data.json", function(json) {

var force = d3.layout.force()
    .charge(-130)
    .linkDistance(function(d) { return 500-(50*d.value);})
    .size([width, height]);

  force
      .nodes(json.nodes)
      .links(json.links)
      .start();

  var link = svg.selectAll("line.link")
      .data(json.links)
      .enter().append("line")
      .attr("class", "link")
      .style("stroke-width", function(d) { return Math.sqrt(d.value);})
      .style("stroke-opacity", function(d) { return d.value/10;})
      .style("stroke", function(d) { 
      x = (tested == d.source) ?  return '#1f77b4' : '#707070'; //<-- Attempt to change the color of the link when this is true. But is is not working...  :(
      })


  var node = svg.selectAll("circle.node")
      .data(json.nodes)
    .enter().append("circle")
      .attr("class", "node")
      .attr("r", 12)
      .style("fill", function(d) { return color(d.group); })
      .call(force.drag);

  node.append("title")
      .text(function(d) { return d.name; });

  force.on("tick", function() {
    link.attr("x1", function(d) { return d.source.x; })
        .attr("y1", function(d) { return d.source.y; })
        .attr("x2", function(d) { return d.target.x; })
        .attr("y2", function(d) { return d.target.y; });

    node.attr("cx", function(d) { return d.x; })
        .attr("cy", function(d) { return d.y; });
  });
});

</script>

推荐答案

d.source 是一个对象，不能使用 == 来确定测试是否是一个类似的对象。 有关对象平等的更多详细信息，请查看此答案。 / a>

d.source is an object, you can't use == to determine if tested is a similar object. Have a look at this answer for more details on object equality.

如果要测试下面描述的 d.source 对象的特定值我假设你想要，你需要指定它。

If you want to test for a specific value of the d.source object described below, which I assume you want, you need to specify it.

这里是源对象架构：（我使用您指向的示例，因此数据来自 miserables.json ）

Here is the source object architecture : (I'm using the example you pointed so the data comes from the miserables.json)

source: Object
    group: 4
    index: 75
    name: "Brujon"
    px: 865.6440689638284
    py: 751.3426708796574
    weight: 7
    x: 865.9584580575608
    y: 751.2658636251376

现在，这里是代码中的破碎部分：

Now, here is the broken part in your code :

x = (tested == d.source) ?  return '#1f77b4' : '#707070';// <-- Attempt to change the color of the link when this is true.

它不工作，因为返回是错位的。
您正在混合三元和 return 语句，但是不按正确的顺序：

It doesn't work because the return is misplaced. You're mixing ternary and return statements but you don't put them in the right order :

return test ? value_if_true : value_if_false;

如果要将值分配给x，可以

if you want to assign the value to x anyway, you can do

x = test ? value_if_true : value_if_false;
return x;

您应该这样做：

return (tested == d.source) ? '#1f77b4' : '#707070';// <-- Attempt to change the color of the link when this is true.

这是一般的语法，但这将不会工作您需要为测试选择一个值，例如：

That's for the general syntax, but this won't work as is You need to pick one of the value for your test for example :

return (tested === d.source.name) ? '#1f77b4' : '#707070';

另外，如果PHP中的变量是一个字符串，你应该做

Also, if the variable from PHP is a string you should do

var tested="<?php echo $tested_source;?>"; //<-- the variable from php

的变量，在大多数情况下，您应该使用 json_encode 将PHP变量映射到

and in most cases you should use json_encode to map PHP variables into javascript ones.

最后，我建议您使用 console 功能以及 Firebug 的控制台面板（如果您使用的是Firefox）或 Chrome开发人员工具的控制台面板（如果您使用的是基于Chromium的浏览器）。

As a final note, I would recommend using console functions coupled with Firebug's console panel if you're using Firefox, or the Chrome Developer Tool's console panel if you're using a Chromium based browser. It would allow you to debug your code more easily.

var width = 960,
  height = 500;

var color = d3.scale.category20();

var force = d3.layout.force().charge(-120).linkDistance(30).size([width, height]);

var svg = d3.select("#chart").append("svg").attr("width", width).attr("height", height);

var tested = 20;

d3.json("miserables.json", function (json) {
  force.nodes(json.nodes).links(json.links).start();

  var link = svg.selectAll("line.link")
  .data(json.links)
  .enter()
  .append("line")
  .attr("class", "link")
  .style("stroke-width", function (d) {
    return Math.sqrt(d.value);
  }).style("stroke-opacity", function (d) {
    return d.value / 10;
  }).style("stroke", function (d) {
    return (tested == d.source.index) ? '#ee3322' : '#707070'; //'#1f77b4'
  });

  var node = svg.selectAll("circle.node")
  .data(json.nodes)
  .enter()
  .append("circle")
  .attr("class", "node")
  .attr("r", 5)
  .style("fill", function (d) {
    return color(d.group);
  }).call(force.drag);

  node.append("title").text(function (d) {
    return d.name;
  });

  force.on("tick", function () {
    link.attr("x1", function (d) {
      return d.source.x;
    }).attr("y1", function (d) {
      return d.source.y;
    }).attr("x2", function (d) {
      return d.target.x;
    }).attr("y2", function (d) {
      return d.target.y;
    });

    node.attr("cx", function (d) {
      return d.x;
    }).attr("cy", function (d) {
      return d.y;
    });
  });
});

这篇关于设置D3力有向图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！