图表显示不正确答案

【问题标题】：Chart is not showing correctly图表显示不正确
【发布时间】：2018-04-23 18:49:36
【问题描述】：

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

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

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

我得到了这样的东西：

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

相同的代码如下：

<!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

Projection2.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

【问题讨论】：

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

【解决方案1】：

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

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

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

应该是.attr("width" ... 和.attr("height" ... 不带“2”后缀.. 可能是搜索和替换错误？

编辑：

啊，你是说第二个文件有不同的标题，所以它没有被第二个图表中的平行坐标图拾取，它仍在寻找 1 月、2 月等 - http://jsfiddle.net/osnky2qr/6/ - 这是一个小提琴，其中第二个图表查找第二个文件中的标题并起作用（我将 tsv 加载更改为在本地加载数据，而不是作为回调 'cos，这在 jsfiddle 中更容易）

【讨论】：

嗨，姆格雷厄姆！感谢回复。我已经编辑了问题以将数据包含在其中。该图表仍然无法更改宽度 2 和高度 2。两个图表具有相同的数据。
当您说相同的数据时，您的意思是projections.tsv与projections2.tsv相同，还是都应该加载projections.tsv？如果是后一种情况，那么代码正在寻找 projections2.tsv 而没有找到它，这可能会解释你的第二个空图？
麦格雷厄姆！感谢您回复。 projections2.tsv 也具有与 projections.tsv 相同的数据，只是标题发生了变化。我也包含了 projections2.tsv 的数据。请看一看。