D3-Санки не нарисован - PullRequest
Новая
       29

D3-Санки не нарисован

0 голосов
/ 17 января 2019

Я пытаюсь нарисовать простую диаграмму Санки с помощью D3. Я попытался применить следующие json-данные, чтобы исключить возможную ошибку формата данных: https://github.com/d3/d3-sankey/blob/master/test/energy.json

Скрипт работает без ошибок, но не рисует диаграмму. Чтобы удалить ошибки из V3 в V5, я изменил функцию цвета и переменную пути с sankey.link () на sankey.links ().

К сожалению, я не смог найти рабочий пример, кроме этого: http://bl.ocks.org/d3noob/c2637e28b79fb3bfea13.

РЕДАКТИРОВАТЬ: очевидно, окно графика имеет 0 высоту при запуске через сервер. 

<!DOCTYPE html>
<html lang="en"><head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <meta charset="utf-8">
    <title>Sankey D3</title>
    <script src="https://d3js.org/d3.v5.js"></script>
    <!-- https://github.com/d3/d3-sankey/releases/tag/v0.7.1 -->
    <script type="text/javascript" src="d3_sankey/d3-sankey.js"></script>
    <link rel="stylesheet" type="text/css" href="styles.css">
  </head>
  <body>
    <p id="chart"></div>

    <script type="text/javascript">
var units = "Widgets";
var margin = {top: 10, right: 10, bottom: 10, left: 10},
    width = 700 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom;

  var formatNumber = d3.format(",.0f"),    // zero decimal places
      format = function(d) { return formatNumber(d) + " " + units; }
  color = d3.scaleOrdinal(d3.schemeCategory20);

  // append the svg canvas to the page
  var svg = d3.select("chart").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 + ")");

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

  var path = sankey.links();

  // load the data
  d3.json("energy.json", function(error, graph) {

      sankey
          .nodes(graph.nodes)
          .links(graph.links)
          .layout(32);

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

      // add the link titles
      link.append("title")
          .text(function(d) {
              return d.source.name + " → " + 
                  d.target.name + "\n" + format(d.value); });

      // 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.behavior.drag()
                .origin(function(d) { return d; })
                .on("dragstart", 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); })
          .append("title")
          .text(function(d) { 
              return d.name + "\n" + format(d.value); });

      // 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", path);
      }
  });
    </script>


</body></html>
...