时间戳

首页 > 解决方案 > d3js连续节点颜色网络 - 无法找出问题

javascript - d3js连续节点颜色网络 - 无法找出问题

问题描述

我无法弄清楚我在以下 html 代码中做错了什么。我有一个带有“内聚”属性的 JSON 文件，它是一个连续变量。我想使用 JSON 文件在 D3JS 上绘制一个力有向图，节点颜色反映内聚能的差异。当我运行这个脚本时，我没有收到任何错误，但也没有输出。我刚开始编写 HTML 脚本，所以如果我犯了一个非常愚蠢的错误，请原谅我，但如果有人能指出我做错了什么，我将不胜感激。

function convertRange(value, r1, r2) {
  return (value - r1[0]) * (r2[1] - r2[0]) / (r1[1] - r1[0]) + r2[0];
}
var svg = d3.select("svg"),
  width = +svg.attr("width"),
  height = +svg.attr("height");

var colorScale = d3.scaleLinear(d3.interpolateViridis);

var simulation = d3.forceSimulation()
  .force("link", d3.forceLink().id(function(d) {
    return d.id;
  }))
  .force("charge", d3.forceManyBody())
  .force("center", d3.forceCenter(width / 2, height / 2));

d3.json("Perovskite_info.json", function(error, graph) {
  if (error) throw error;

  var link = svg.append("g")
    .attr("class", "links")
    .selectAll("line")
    .data(graph.links)
    .enter().append("line")
    .attr("stroke-width", function(d) {
      return Math.sqrt(d.value);
    });

  var node = svg.append("g")
    .attr("nodes")
    .selectAll("circle")
    .data(graph.nodes)
    .enter().append("circle")
    .attr("r", 5)
    .attr("fill", function(d) {
      return colorScale(convertRange(d.cohesive_en, [1.6, 7.2], [0, 1]));
    })
    .call(d3.drag()
      .on("start", dragstarted)
      .on("drag", dragged)
      .on("end", dragended));

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

  simulation
    .nodes(graph.nodes)
    .on("tick", ticked);

  simulation.force("link")
    .links(graph.links);

  function ticked() {
    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;
      });
  }
});

function dragstarted(d) {
  if (!d3.event.active) simulation.alphaTarget(0.3).restart();
  d.fx = d.x;
  d.fy = d.y;
}

function dragged(d) {
  d.fx = d3.event.x;
  d.fy = d3.event.y;
}

function dragended(d) {
  if (!d3.event.active) simulation.alphaTarget(0);
  d.fx = null;
  d.fy = null;
}
.links line {
  stroke: #999;
  stroke-opacity: 0.6;
}

.nodes circle {
  stroke: black;
  stroke-width: 1.5px;
}
<script src="https://d3js.org/d3.v5.min.js"></script>

<h1>Cohesive Energy Calculation</h1>

<svg width="1060" height="800"></svg>

这就是我的 json 开始的方式：

{"directed": false, "multigraph": false, "graph": {}, "nodes": [{"pos": [-37.50340668168362, -0.6442713601030169], "cohesive_en": 5.752120797750001, "cohesive": 5.752120797750001, "cluster": 1, "similarity": 0.6371195466189876, "id": "PrCoO3"},

如需完整的 JSON，请点击此链接：https ://api.myjson.com/bins/m3gd8

编辑：所以我弄清楚了问题所在：

首先，正如其中一个答案所述，我使用的是 d3.v5 但使用 d3v4 api 导入数据。其次，我还需要导入我没有完成的 d3 插值模块。所以代码不起作用。这个问题是在我做了 d3 2 天的时候被问到的，所以代码的质量很低。

标签： javascripthtmld3.js

解决方案

您使用加载文件的 D3v4 API。

D3v5 使用 Fetch API

// d3.json("Perovskite_info.json", function(error, graph) {
d3.json("Perovskite_info.json").then( function(graph) {
    //if (error) throw error;

然后，与链接相比，添加节点的方式存在问题，但您会发现。

为什么colorScale Math自己在convertRange？

还没有颜色，但这是一个不同的问题。

推荐阅读