Javascript D3圖形，對數組進行排序

Question

我試圖在d3的圖形中顯示值數組時似乎出現排序問題； 當我將值數組通過本地存儲傳遞到另一個將生成圖形的頁面時，帶有圖形的新頁面上的輸出顯示了一個具有非常奇怪模式的未排序圖形。 IE：傳遞帶有值的數組，其中每個索引中的值1st值都說500，它形成了Y軸，而另一個是X軸：

[500, 1.62], [600, 2.42], [700, 3.2], [800, 2], [1100, 3.2] , [1100, 3.2]

最終顯示為：

[1100, 3.2],  [1100, 3.2],  [800, 2], [700, 3.2], [600, 2.42], [500, 1.62]

當我嘗試在新頁面中生成圖形時，該行變得非常混亂且不正確。 我正在使用array.sort（），但這似乎不起作用。 下面是代碼； 我在這里想念什么嗎？

<html>


<svg class="chart"></svg>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

var data = [4, 8, 15, 16, 23, 42];

var x = d3.scale.linear()
    .domain([0, d3.max(data)])
    .range([0, 420]);

d3.select(".chart")
  .selectAll("div")
    .data(data)
  .enter().append("div")
    .style("width", function(d) { return x(d) + "px"; })
    .text(function(d) { return d; });
</script>
<div class="chart"></div>*/ -->

<meta charset="utf-8">
<div class="chart"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<script>

//Get data from previous page
 var arrData = JSON.parse(window.localStorage.getItem("graphArray"));
 arrData.

  arrData.sort(); 
   console.log(arrData);

var margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var parseDate = d3.time.format("%Y-%m-%d").parse;


var x = d3.time.scale()
    .range([0, width])

var y = d3.scale.linear()
    .range([height, 0]);

var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");

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

var line = d3.svg.line()
    .x(function(d) { return x(d.idd); })
    .y(function(d) { return y(d.timing); });

var svg = d3.select("body").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 + ")");

  var data = arrData.map(function(d) {
      return {
          idd: d[1],
         timing: d[0]

      };

  });

  console.log(data);


  x.domain(d3.extent(data, function(d) { return d.idd; }));
  y.domain(d3.extent(data, function(d) { return d.timing; }));

  svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + height + ")")
      .call(xAxis);

  svg.append("g")
      .attr("class", "y axis")
      .call(yAxis)
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", ".71em")
      .style("text-anchor", "end")
      .text("Time (ms)");

  svg.append("path")
      .datum(data)
      .attr("class", "line")
      .attr("d", line);




</script>

<body>
  <span></span>
<div class="dot">.</div>

</body>
</html>

Answer 1

您的數組由長度為2的數組組成。僅對該數組進行排序是不夠的。 您需要通過提供如下的compare方法來詳細說明如何對數組進行排序：

arrData.sort(function(a,b) {
    return a[0] - b[0];
});

在這里，您可以比較子數組中索引0處的數字。

Javascript D3圖形，對數組進行排序

問題描述

1 個解決方案

解決方案1
1 已采納 2015-10-30 14:10:39

Javascript D3圖形，對數組進行排序

問題描述

1 個解決方案

解決方案1 1 已采納 2015-10-30 14:10:39

解決方案1
1 已采納 2015-10-30 14:10:39