javascript - 图表显示不正确

标签 javascript node.js d3.js data-visualization

我正在使用 d3.js 制作两个图表

我有两个并排的 svg。现在，其中一个显示正确。然而，做同样的事情，第二个 svg 没有正确渲染。

我面临的问题是，在第二个 svg 中，< path > 没有获得正确的值，而且根本没有显示线条。

我得到这样的东西:

https://imgur.com/a/8DCLIKz

我也想要第二张图表中的完全相同的线条。

其代码如下:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://d3js.org/d3.v3.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://canvasjs.com/assets/script/canvasjs.min.js"> </script>
    <style>
    body {
      margin: 0px;
    }

    #parent {
    text-align:center;
    }

    svg {
    font: 20px sans-serif;
    }

    .background path {
      fill: none;
      stroke: none;
      stroke-width: 15px;
      pointer-events: stroke;
    }

    .foreground path {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;
    }

    .background2 path {
      fill: none;
      stroke: none;
      stroke-width: 15px;
      pointer-events: stroke;
    }

    .foreground2 path {
      fill: none;
      stroke: steelblue;
      stroke-width: 1.5px;
    }

    .axis .title {
      font-size: 16px;
      font-weight: bold;
      text-transform: uppercase;
    }

    .axis line,
    .axis path {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }

    .axis2 .title2 {
      font-size: 16px;
      font-weight: bold;
      text-transform: uppercase;
    }

    .axis2 line,
    .axis2 path {
      fill: none;
      stroke: #000;
      shape-rendering: crispEdges;
    }


    .label {
      -webkit-transition: fill 25ms linear;
    }

    .active .label:not(.inactive) {
      font-weight: bold;
    }

    .label.inactive {
      fill: #ccc;
    }

     .label2 {
      -webkit-transition: fill 25ms linear;
    }

    .active2 .label2:not(.inactive) {
      font-weight: bold;
    }

    .label2.inactive2 {
      fill: #ccc;
    }


    .foreground path.inactive {
      stroke: #ccc;
      stroke-opacity: .5;
      stroke-width: 1px;
    }

    .foreground2 path.inactive2 {
      stroke: #ccc;
      stroke-opacity: .5;
      stroke-width: 1px;
    }

    </style>
 </head> 


<body>

  <nav class="navbar navbar-inverse bg-inverse">
        <div class="container-fluid">
            <div class="navbar-header">
                <a class="navbar-brand" style="color: #ffffff;" href="/">News: A friend or foe</a>
            </div>
            <div class="collapse navbar-collapse">
                <ul class="nav navbar-nav navbar-right">
                    <li><a style="color: #ffffff;" href="/">Home</a></li>
                    <li><a style="color: #ffffff;" href="/">About</a></li>

            </div>
        </div>
  </nav>

<div>
    <div class="col-md-6">
      <svg id= "svg1" width="800" height="400" style="background: white;"></svg>

    </div>


    <div class="col-md-6">
      <svg id="svg2" width="800" height="400" style="background: white;"></svg>

    </div>

</div> 

<script>
/////////////////////////////////////////////////////////////////////////////////////PARALLEL COORDINATE PLOTS 1/////////////////////////////////////////////////////////////////////////////////

var margin = {top: 30, right: 40, bottom: 20, left: 200},
    width = 700 - margin.left - margin.right,
    height = 400 - margin.top - margin.bottom;

var dimensions = [
  {
    name: "name",
    scale: d3.scale.ordinal().rangePoints([0, height]),
    type: String
  },
  {
    name: "January",
    scale: d3.scale.linear().range([0, height]),
    type: Number
  },
  {
    name: "February",
    scale: d3.scale.linear().range([height, 0]),
    type: Number
  },
  {
    name: "March",
    scale: d3.scale.sqrt().range([height, 0]),
    type: Number
  },
  {
    name: "April",
    scale: d3.scale.linear().range([height, 0]),
    type: Number
  }
];

var x = d3.scale.ordinal()
    .domain(dimensions.map(function(d) { return d.name; }))
    .rangePoints([0, width]);

var line = d3.svg.line()
    .defined(function(d) { return !isNaN(d[1]); });

var yAxis = d3.svg.axis()
    .orient("left");

var svg = d3.select("#svg1")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var dimension = svg.selectAll(".dimension")
    .data(dimensions)
  .enter().append("g")
    .attr("class", "dimension")
    .attr("transform", function(d) { return "translate(" + x(d.name) + ")"; });

d3.tsv("projections.tsv", function(error, data) {
  if (error) throw error;

  dimensions.forEach(function(dimension) {
    dimension.scale.domain(dimension.type === Number
        ? d3.extent(data, function(d) { return +d[dimension.name]; })
        : data.map(function(d) { return d[dimension.name]; }).sort());
  });

  svg.append("g")
      .attr("class", "background")
    .selectAll("path")
      .data(data)
    .enter().append("path")
      .attr("d", draw);

  svg.append("g")
      .attr("class", "foreground")
    .selectAll("path")
      .data(data)
    .enter().append("path")
      .attr("d", draw);

  dimension.append("g")
      .attr("class", "axis")
      .each(function(d) { d3.select(this).call(yAxis.scale(d.scale)); })
    .append("text")
      .attr("class", "title")
      .attr("text-anchor", "middle")
      .attr("y", -9)
      .text(function(d) { return d.name; });

  // Rebind the axis data to simplify mouseover.
  svg.select(".axis").selectAll("text:not(.title)")
      .attr("class", "label")
      .data(data, function(d) { return d.name || d; });

  var projection = svg.selectAll(".axis text,.background path,.foreground path")
      .on("mouseover", mouseover)
      //.on("mouseout", mouseout);

  function mouseover(d) {
    svg.classed("active", true);
    projection.classed("inactive", function(p) { return p !== d; });
    projection.filter(function(p) { return p === d; }).each(moveToFront);
  }

  // function mouseout(d) {
  //   svg.classed("active", false);
  //   projection.classed("inactive", false);
  // }

  function moveToFront() {
    this.parentNode.appendChild(this);
  }
});

function draw(d) {
  return line(dimensions.map(function(dimension) {
    return [x(dimension.name), dimension.scale(d[dimension.name])];
  }));
}





//////////////////////////////////////////////////////////////////////////////////PARALLEL COORDINATE PLOTS 2/////////////////////////////////////////////////////////////////////////////////


var margin2 = {top2: 30, right2: 40, bottom2: 20, left2: 200},
    width2 = 700 - margin2.left2 - margin2.right2,
    height2 = 400 - margin2.top2 - margin2.bottom2;

var dimensions2 = [
  {
    name: "name",
    scale: d3.scale.ordinal().rangePoints([0, height2]),
    type: String
  },
  {
    name: "January",
    scale: d3.scale.linear().range([0, height2]),
    type: Number
  },
  {
    name: "February",
    scale: d3.scale.linear().range([height2, 0]),
    type: Number
  },
  {
    name: "March",
    scale: d3.scale.sqrt().range([height2, 0]),
    type: Number
  },
  {
    name: "April",
    scale: d3.scale.linear().range([height2, 0]),
    type: Number
  }
];

var x2 = d3.scale.ordinal()
    .domain(dimensions2.map(function(d) { return d.name; }))
    .rangePoints([0, width2]);

var line2 = d3.svg.line()
    .defined(function(d) { return !isNaN(d[1]); });

var yAxis2 = d3.svg.axis()
    .orient("left");

var svg2 = d3.select("#svg2")
    .attr("width2", width2 + margin2.left2 + margin2.right2)
    .attr("height2", height2 + margin2.top2 + margin2.bottom2)
  .append("g")
    .attr("transform", "translate(" + margin2.left2 + "," + margin2.top2 + ")");

var dimension2 = svg2.selectAll(".dimension2")
    .data(dimensions2)
  .enter().append("g")
    .attr("class", "dimension2")
    .attr("transform", function(d) { return "translate(" + x2(d.name) + ")"; });

d3.tsv("projections2.tsv", function(error, data2) {
  if (error) throw error;

  dimensions2.forEach(function(dimension2) {
    dimension2.scale.domain(dimension2.type === Number
        ? d3.extent(data2, function(d) { return +d[dimension2.name]; })
        : data2.map(function(d) { return d[dimension2.name]; }).sort());
  });

  svg2.append("g")
      .attr("class", "background2")
    .selectAll("path")
      .data(data2)
    .enter().append("path")
      .attr("d", draw2);


  console.log(data2);

  svg2.append("g")
      .attr("class", "foreground2")
    .selectAll("path")
      .data(data2)
    .enter().append("path")
      .attr("d", draw2);

  dimension2.append("g")
      .attr("class", "axis2")
      .each(function(d) { d3.select(this).call(yAxis2.scale(d.scale)); })
    .append("text")
      .attr("class", "title2")
      .attr("text-anchor", "middle")
      .attr("y", -9)
      .text(function(d) { return d.name; });

  // Rebind the axis data to simplify mouseover.
  svg2.select(".axis2").selectAll("text:not(.title2)")
      .attr("class", "label2")
      .data(data2, function(d) { return d.name || d; });

  var projection2 = svg2.selectAll(".axis2 text,.background2 path,.foreground2 path")
      .on("mouseover", mouseover2)
      //.on("mouseout", mouseout);

  function mouseover2(d) {
    svg2.classed("active2", true);
    projection2.classed("inactive2", function(p) { return p !== d; });
    projection2.filter(function(p) { return p === d; }).each(moveToFront2);
  }

  // function mouseout(d) {
  //   svg.classed("active", false);
  //   projection.classed("inactive", false);
  // }

  function moveToFront2() {
    this.parentNode.appendChild(this);
  }
});

function draw2(d) {
  return line2(dimensions2.map(function(dimension2) {
    return [x2(dimension2.name), dimension2.scale(d[dimension2.name])];
  }));
}
</script>
</body> 
<html>

如果有人能告诉我我在这里做错了什么，我将不胜感激？ 提前致谢。

数据如下:

    January February    March   April   name
87.7    0.29    0.37    18.25   Eckert III
87.5    0.25    0.19    20.54   Natural Earth
87.4    0.27    0.17    24.2    Winkel II
86.5    0.23    0.28    19.15   Kavraisky VII
85  0.26    0.18    23.28   Winkel Tripel
84.3    0.27    0.19    21.27   Robinson
83.2    0.25    0.43    16.14   Fahey
81.9    0.36    0   28.73   Eckert IV
81.8    0.26    0.24    22.31   Hölzel
80.4    0.26    0.34    20.41   Wagner VI
80  0.3 0.29    23.47   Eckert V

投影2.tsv

    Acc. 40º 150%   Scale   Areal   Angular name
87.7    0.29    0.37    18.25   Eckert III
87.5    0.25    0.19    20.54   Natural Earth
87.4    0.27    0.17    24.2    Winkel II
86.5    0.23    0.28    19.15   Kavraisky VII
85  0.26    0.18    23.28   Winkel Tripel
84.3    0.27    0.19    21.27   Robinson
83.2    0.25    0.43    16.14   Fahey
81.9    0.36    0   28.73   Eckert IV
81.8    0.26    0.24    22.31   Hölzellllll

最佳答案

如果没有一个有效的例子就很难说 - 我们缺少 projections.tsv/projections2.tsv 文件，我们可以用你的代码制作一个有效的 jsfiddle

但我确实注意到了这一点 -->

  .attr("width2", width2 + margin2.left2 + margin2.right2)
    .attr("height2", height2 + margin2.top2 + margin2.bottom2)

应该是 .attr("width"... 和 .attr("height"... 没有后缀 '2' .. prob a search and替换错误？

编辑:

啊，你是说第二个文件有不同的标题，所以第二个图表中的平行坐标图没有找到它，第二个图表仍在寻找一月、二月等 - http://jsfiddle.net/osnky2qr/6/ - 这是一个 fiddle ，其中第二个图表在第二个文件中查找标题并工作(我更改了 tsv 加载以在本地加载数据而不是作为回调'因为在 jsfiddle 中更容易)

关于javascript - 图表显示不正确，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49988008/

上一篇：javascript - jquery 获取被点击元素的 css 属性

下一篇：javascript - 清除屏幕并移动html5 Canvas 中的元素

相关文章：

javascript - 将字符串数组从 ajax 函数传递到 mvc Controller

javascript - 直接链接到此网页

javascript - dojo 增强网格过滤器 - 以编程方式设置 A 列大于某个数字

node.js - 如何防止 "npm install"更改package.json

javascript - Internet Explorer 中损坏的 d3.js 动画

d3.js - 酒窝js饼图

javascript - 在每个节点上应用 onmouseover - GOjs 库 - 泳道

node.js - 将 Google 推送通知结果设置为错误 401 未经授权的 WebHook 回调 channel

node.js - Angular 6 - 我的所有测试都失败，错误代码为 "Timeout - Async callback was not invoked within timeout specified by jasmine.DEFAULT_TIMEOUT_INTERVAL"

javascript - 如何在 D3 Tornado 图表中将 Y 轴居中

©2024 IT工具网  联系我们