文章/答案/技术大牛

发布

社区首页 >问答首页 >Sankey D3.JS返回节点大小的负值

问Sankey D3.JS返回节点大小的负值
EN

Stack Overflow用户

提问于 2021-05-14 08:45:25

回答 1查看 253关注 0票数 1

在以平行坐标绘制图形之后，我现在开始使用Sankey类型的图形。所以，我看了一下这段代码：https://www.d3-graph-gallery.com/graph/sankey_basic.html并试图理解它是如何在以后添加一些交互的，但是在第一次我想使用我自己的数据(https://raw.githubusercontent.com/augustin-laurent/Visualization_Tool/master/data.json)。

但是，在更改输入文件后，我得到了一个错误，即节点的高度为负值：

[Error] Error: Invalid negative value for <rect> attribute height="-2554.0945674044265"
    (fonction anonyme) (d3.v4.min.js:2:104826)
    each (d3.v4.min.js:2:104203)
    (fonction anonyme) (sankey.html:84)
    (fonction anonyme) (d3.v4.min.js:2:64781)
    call (d3.v4.min.js:2:99933)
    e (d3.v4.min.js:2:63360)
[Error] Error: Invalid negative value for <rect> attribute height="-755.9054325955734"
    (fonction anonyme) (d3.v4.min.js:2:104826)
    each (d3.v4.min.js:2:104203)
    (fonction anonyme) (sankey.html:84)
    (fonction anonyme) (d3.v4.min.js:2:64781)
    call (d3.v4.min.js:2:99933)
    e (d3.v4.min.js:2:63360)
[Error] Error: Invalid negative value for <rect> attribute height="-236.42857142857142"
    (fonction anonyme) (d3.v4.min.js:2:104826)
    each (d3.v4.min.js:2:104203)
    (fonction anonyme) (sankey.html:84)
    (fonction anonyme) (d3.v4.min.js:2:64781)
    call (d3.v4.min.js:2:99933)
    e (d3.v4.min.js:2:63360)
[Error] Error: Invalid negative value for <rect> attribute height="-116.54929577464789"
    (fonction anonyme) (d3.v4.min.js:2:104826)
    each (d3.v4.min.js:2:104203)
    (fonction anonyme) (sankey.html:84)
    (fonction anonyme) (d3.v4.min.js:2:64781)
    call (d3.v4.min.js:2:99933)
    e (d3.v4.min.js:2:63360)
[Error] Error: Invalid negative value for <rect> attribute height="-356.30784708249496"
    (fonction anonyme) (d3.v4.min.js:2:104826)
    each (d3.v4.min.js:2:104203)
    (fonction anonyme) (sankey.html:84)
    (fonction anonyme) (d3.v4.min.js:2:64781)
    call (d3.v4.min.js:2:99933)
    e (d3.v4.min.js:2:63360)
[Error] Error: Invalid negative value for <rect> attribute height="-236.42857142857142"
    (fonction anonyme) (d3.v4.min.js:2:104826)
    each (d3.v4.min.js:2:104203)
    (fonction anonyme) (sankey.html:84)
    (fonction anonyme) (d3.v4.min.js:2:64781)
    call (d3.v4.min.js:2:99933)
    e (d3.v4.min.js:2:63360)

这是“我的”密码

<!DOCTYPE html>
<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.min.js"></script>

<!-- Load the sankey.js function -->
<script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/sankey.js"></script>

<!-- Create a div where the graph will take place -->
<div id="my_dataviz"></div>

<!-- Add style to links or they won't appear properly-->
<style>
.link {
  fill: none;
  stroke: #000;
  stroke-opacity: .2;
}
.link:hover {
  stroke-opacity: .5;
}
</style>

<script>

  // set the dimensions and margins of the graph
  var margin = {top: 10, right: 10, bottom: 10, left: 10},
      width = 450 - margin.left - margin.right,
      height = 480 - margin.top - margin.bottom;
  
  // append the svg object to the body of the page
  var svg = d3.select("#my_dataviz").append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");
  
  // Color scale used
  var color = d3.scaleOrdinal(d3.schemeCategory20);
  
  // Set the sankey diagram properties
  var sankey = d3.sankey()
      .nodeWidth(36)
      .nodePadding(290)
      .size([width, height]);
  
  // load the data
  d3.json("https://raw.githubusercontent.com/augustin-laurent/Visualization_Tool/master/data.json", function(error, graph) {
  
    // Constructs a new Sankey generator with the default settings.
    sankey
        .nodes(graph.nodes)
        .links(graph.links)
        .layout(1);
  
    // add in the links
    var link = svg.append("g")
      .selectAll(".link")
      .data(graph.links)
      .enter()
      .append("path")
        .attr("class", "link")
        .attr("d", sankey.link() )
        .style("stroke-width", function(d) { return Math.max(1, d.dy); })
        .sort(function(a, b) { return b.dy - a.dy; });
  
    // add in the nodes
    var node = svg.append("g")
      .selectAll(".node")
      .data(graph.nodes)
      .enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
        .call(d3.drag()
          .subject(function(d) { return d; })
          .on("start", function() { this.parentNode.appendChild(this); })
          .on("drag", dragmove));
  
    // add the rectangles for the nodes
    node
      .append("rect")
        .attr("height", function(d) { return d.dy; })
        .attr("width", sankey.nodeWidth())
        .style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); })
        .style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
      // Add hover text
      .append("title")
        .text(function(d) { return d.name + "\n" + "There is " + d.value + " stuff in this node"; });
  
    // add in the title for the nodes
      node
        .append("text")
          .attr("x", -6)
          .attr("y", function(d) { return d.dy / 2; })
          .attr("dy", ".35em")
          .attr("text-anchor", "end")
          .attr("transform", null)
          .text(function(d) { return d.name; })
        .filter(function(d) { return d.x < width / 2; })
          .attr("x", 6 + sankey.nodeWidth())
          .attr("text-anchor", "start");
  
    // the function for moving the nodes
    function dragmove(d) {
      d3.select(this)
        .attr("transform",
              "translate("
                 + d.x + ","
                 + (d.y = Math.max(
                    0, Math.min(height - d.dy, d3.event.y))
                   ) + ")");
      sankey.relayout();
      link.attr("d", sankey.link() );
    }
  
  });
  
  
  </script>

我做了一些研究，发现这可能是关于我的价值，但没有一个是否定的，我甚至试图将节点名改为node0、node1等。但是它一点也没有改变，仍然是相同的错误，我想也许我工作的地方的div太小或者类似的东西，但是我不太确定

html

css

d3.js

javascript

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-05-14 10:27:02

看起来Sankey库可能有一个节点定位计算错误。

该问题可以通过减少节点填充：nodePadding = 5来解决。

看，它在片段中工作：

// set the dimensions and margins of the graph
var margin = {top: 10, right: 10, bottom: 10, left: 10},
    width = 450 - margin.left - margin.right,
    height = 480 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg = d3.select("#my_dataviz").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform",
          "translate(" + margin.left + "," + margin.top + ")");

// Color scale used
var color = d3.scaleOrdinal(d3.schemeCategory20);

// Set the sankey diagram properties
var sankey = d3.sankey()
    .nodeWidth(36)
    .nodePadding(5)
    .size([width, height]);

// load the data
d3.json("https://raw.githubusercontent.com/augustin-laurent/Visualization_Tool/master/data.json", function(error, graph) {

  // Constructs a new Sankey generator with the default settings.
  sankey
      .nodes(graph.nodes)
      .links(graph.links)
      .layout(1);

  // add in the links
  var link = svg.append("g")
    .selectAll(".link")
    .data(graph.links)
    .enter()
    .append("path")
      .attr("class", "link")
      .attr("d", sankey.link() )
      .style("stroke-width", function(d) { return Math.max(1, d.dy); })
      .sort(function(a, b) { return b.dy - a.dy; });

  // add in the nodes
  var node = svg.append("g")
    .selectAll(".node")
    .data(graph.nodes)
    .enter().append("g")
      .attr("class", "node")
      .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
      .call(d3.drag()
        .subject(function(d) { return d; })
        .on("start", function() { this.parentNode.appendChild(this); })
        .on("drag", dragmove));

  // add the rectangles for the nodes
  node
    .append("rect")
      .attr("height", function(d) { return d.dy; })
      .attr("width", sankey.nodeWidth())
      .style("fill", function(d) { return d.color = color(d.name.replace(/ .*/, "")); })
      .style("stroke", function(d) { return d3.rgb(d.color).darker(2); })
    // Add hover text
    .append("title")
      .text(function(d) { return d.name + "\n" + "There is " + d.value + " stuff in this node"; });

  // add in the title for the nodes
    node
      .append("text")
        .attr("x", -6)
        .attr("y", function(d) { return d.dy / 2; })
        .attr("dy", ".35em")
        .attr("text-anchor", "end")
        .attr("transform", null)
        .text(function(d) { return d.name; })
      .filter(function(d) { return d.x < width / 2; })
        .attr("x", 6 + sankey.nodeWidth())
        .attr("text-anchor", "start");

  // the function for moving the nodes
  function dragmove(d) {
    d3.select(this)
      .attr("transform",
            "translate("
               + d.x + ","
               + (d.y = Math.max(
                  0, Math.min(height - d.dy, d3.event.y))
                 ) + ")");
    sankey.relayout();
    link.attr("d", sankey.link() );
  }

});

.link {
  fill: none;
  stroke: #000;
  stroke-opacity: .2;
}
.link:hover {
  stroke-opacity: .5;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.13.0/d3.min.js"></script>

<script src="https://cdn.jsdelivr.net/gh/holtzy/D3-graph-gallery@master/LIB/sankey.js"></script>

<div id="my_dataviz" />

票数 2

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/67531498

复制

相似问题

问Sankey D3.JS返回节点大小的负值
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Sankey D3.JS返回节点大小的负值EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Sankey D3.JS返回节点大小的负值
EN