个人中心
gpt4 book ai didi

javascript - 图表显示不正确

转载 作者：行者123 更新时间：2023-11-30 20:34:17 28 4
gpt4 key购买 nike

我正在使用 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/

28 4 0
文章推荐： c - 将天数添加到日期中
文章推荐： c - 函数的隐式声明 ‘mygets’ [-Wimplicit-function-declaration] mygets(str1);
文章推荐： javascript - jquery 获取被点击元素的 css 属性
文章推荐： javascript - d3 Circle Packing - 打印多行标签
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com