javascript - 图表上的 d3 数据线迷失方向

Question

我不确定还需要实现什么才能使线条理顺。我添加了一个函数来对数据数组中的日期进行排序，并且认为可以解决这个问题。

data = data.sort(sortByDateAscending);
   console.log(JSON.stringify(data))

但是图表上的数据线仍然显得有点疯狂，我是否需要将时间对象格式化为特定格式？

感谢任何帮助。这是一个jsfiddle，提前致谢。 https://jsfiddle.net/xvkmtvha

Answer 1

您应该使用排序后的数据数组创建 dataGroup。

data = data.sort(sortByDateAscending); //Sort data array first

var dataGroup = d3.nest()
  .key(function(d) {
    return d.Brand;
  })
  .entries(data); //Apply sorted data

var data = [{
  "Brand": "Lexus",
  "Time": "2017-05-08 16",
  "Count": 8263
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 09",
  "Count": 25382
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 06",
  "Count": 17543
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 10",
  "Count": 25758
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 12",
  "Count": 2052
}, {
  "Brand": "Acura",
  "Time": "2017-05-08 10",
  "Count": 9
}, {
  "Brand": "Acura",
  "Time": "2017-05-08 07",
  "Count": 4
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 12",
  "Count": 11653
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 21",
  "Count": 16199
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 23",
  "Count": 179
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 13",
  "Count": 11334
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 17",
  "Count": 600
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 05",
  "Count": 7365
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 18",
  "Count": 2147
}, {
  "Brand": "Acura",
  "Time": "2017-05-08 14",
  "Count": 8
}, {
  "Brand": "Acura",
  "Time": "2017-05-08 18",
  "Count": 3
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 20",
  "Count": 7694
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 03",
  "Count": 1173
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 17",
  "Count": 8579
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 20",
  "Count": 21008
}, {
  "Brand": "Acura",
  "Time": "2017-05-08 16",
  "Count": 10
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 07",
  "Count": 2430
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 07",
  "Count": 2795
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 06",
  "Count": 2614
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 08",
  "Count": 11712
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 05",
  "Count": 188
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 10",
  "Count": 623
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 08",
  "Count": 2255
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 07",
  "Count": 21790
}, {
  "Brand": "Acura",
  "Time": "2017-05-08 11",
  "Count": 9
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 22",
  "Count": 12093
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 15",
  "Count": 560
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 09",
  "Count": 1903
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 04",
  "Count": 6166
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 02",
  "Count": 5636
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 12",
  "Count": 1714
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 10",
  "Count": 2288
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 20",
  "Count": 285
}, {
  "Brand": "Acura",
  "Time": "2017-05-08 13",
  "Count": 7
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 14",
  "Count": 1432
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 17",
  "Count": 22696
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 15",
  "Count": 8459
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 15",
  "Count": 21139
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 16",
  "Count": 1622
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 22",
  "Count": 302
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 03",
  "Count": 2195
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 03",
  "Count": 8151
}, {
  "Brand": "Acura",
  "Time": "2017-05-08 12",
  "Count": 6
}, {
  "Brand": "Acura",
  "Time": "2017-05-08 15",
  "Count": 8
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 21",
  "Count": 1702
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 20",
  "Count": 2004
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 23",
  "Count": 9162
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 00",
  "Count": 1917
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 18",
  "Count": 24969
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 03",
  "Count": 79
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 09",
  "Count": 11751
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 05",
  "Count": 2218
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 03",
  "Count": 5742
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 11",
  "Count": 26282
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 00",
  "Count": 4583
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 23",
  "Count": 1731
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 07",
  "Count": 10854
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 13",
  "Count": 1670
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 11",
  "Count": 11539
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 08",
  "Count": 515
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 13",
  "Count": 25338
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 20",
  "Count": 605
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 23",
  "Count": 696
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 04",
  "Count": 2077
}, {
  "Brand": "Acura",
  "Time": "2017-05-08 09",
  "Count": 6
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 17",
  "Count": 442
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 02",
  "Count": 44
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 14",
  "Count": 23355
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 23",
  "Count": 4717
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 16",
  "Count": 618
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 00",
  "Count": 946
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 11",
  "Count": 1636
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 19",
  "Count": 2161
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 01",
  "Count": 2199
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 07",
  "Count": 403
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 18",
  "Count": 771
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 12",
  "Count": 553
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 21",
  "Count": 249
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 06",
  "Count": 2285
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 06",
  "Count": 9152
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 11",
  "Count": 2248
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 02",
  "Count": 2351
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 16",
  "Count": 612
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 09",
  "Count": 515
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 10",
  "Count": 11559
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 12",
  "Count": 25999
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 19",
  "Count": 8963
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 14",
  "Count": 559
}, {
  "Brand": "Acura",
  "Time": "2017-05-08 08",
  "Count": 13
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 10",
  "Count": 1660
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 09",
  "Count": 2579
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 00",
  "Count": 7609
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 05",
  "Count": 12576
}, {
  "Brand": "Acura",
  "Time": "2017-05-08 17",
  "Count": 14
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 13",
  "Count": 626
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 22",
  "Count": 256
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 13",
  "Count": 1931
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 02",
  "Count": 1351
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 18",
  "Count": 9252
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 14",
  "Count": 10184
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 19",
  "Count": 333
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 22",
  "Count": 1508
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 08",
  "Count": 2884
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 19",
  "Count": 24708
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 04",
  "Count": 91
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 08",
  "Count": 24665
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 18",
  "Count": 438
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 16",
  "Count": 20871
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 04",
  "Count": 9447
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 01",
  "Count": 7178
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 01",
  "Count": 5186
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 17",
  "Count": 1793
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 22",
  "Count": 4946
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 15",
  "Count": 902
}, {
  "Brand": "Lexus",
  "Time": "2017-05-08 21",
  "Count": 6131
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 00",
  "Count": 102
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 19",
  "Count": 705
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 21",
  "Count": 388
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 06",
  "Count": 332
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 01",
  "Count": 67
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 15",
  "Count": 1597
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 04",
  "Count": 1341
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 01",
  "Count": 1304
}, {
  "Brand": "Honda",
  "Time": "2017-05-08 11",
  "Count": 625
}, {
  "Brand": "Chrysler",
  "Time": "2017-05-08 05",
  "Count": 1719
}, {
  "Brand": "Toyota",
  "Time": "2017-05-08 02",
  "Count": 7867
}, {
  "Brand": "General Motors Truck Company (GMC)",
  "Time": "2017-05-08 14",
  "Count": 1691
}];

data.forEach(function(d) {
  d.Time = d3.timeParse("%Y-%m-%d %H")(d.Time)
    //d.Time = d3.timeFormat("%m/%d/%Y %H:%M:%S %p")
  var formatTime = d3.timeFormat("%m/%d/%Y %H:%M:%S %p");
  formatTime(d.Time);
});



function sortByDateAscending(a, b) {
  // Dates will be cast to numbers automagically:
  return a.Time - b.Time;
}

data = data.sort(sortByDateAscending);

var dataGroup = d3.nest() //d3 method that groups data by Brand  
  .key(function(d) {
    return d.Brand;
  })
  .entries(data);

//var color = d3.scale.category10();
var vis = d3.select("#visualisation"),
  WIDTH = 1000,
  HEIGHT = 500,
  MARGINS = {
    top: 50,
    right: 20,
    bottom: 50,
    left: 50
  },
  xScale = d3.scaleTime().range([MARGINS.left, WIDTH - MARGINS.right]).domain([d3.min(data, function(d) { //set up x-axis based on data
    return d.Time;
  }), d3.max(data, function(d) {
    return d.Time;
  })]),

  yScale = d3.scaleLinear().range([HEIGHT - MARGINS.top, MARGINS.bottom]).domain([d3.min(data, function(d) { //set up y-axis based on data
    return d.Count;
  }), d3.max(data, function(d) {
    return d.Count;
  })]),

  xAxis = d3.axisBottom()
  .scale(xScale),
  yAxis = d3.axisLeft()
  .scale(yScale)

vis.append("svg:g")
  .attr("class", "x axis")
  .attr("transform", "translate(0," + (HEIGHT - MARGINS.bottom) + ")")
  .call(xAxis);

vis.append("svg:g")
  .attr("class", "y axis")
  .attr("transform", "translate(" + (MARGINS.left) + ",0)")
  .call(yAxis);

var lineGen = d3.line()
  .x(function(d) {
    return xScale(d.Time);
  })
  .y(function(d) {
    return yScale(d.Count);
  })
  .curve(d3.curveLinear);

var color = d3.scaleOrdinal(d3.schemeCategory10); // set the colour scale

dataGroup.forEach(function(d, i) { //iterate over the dataGroup and create line graph for each brand
  vis.append('svg:path')
    .attr('d', lineGen(d.values))
    .style("stroke", function() { // Add the colours dynamically
      return d.color = color(d.key);
    })
    .attr('stroke-width', 2)
    .attr("id", 'tag' + d.key.replace(/\s+/g, '')) // assign ID
    .attr('fill', 'none');

  lSpace = WIDTH / dataGroup.length; //define the legend space based on number of brands
  vis.append("text")
    .attr("x", (lSpace / 2) + i * lSpace)
    .attr("y", HEIGHT)
    .style("fill", function() { // Add the colours dynamically
      return d.color = color(d.key);
    })
    .attr("class", "legend")
    .on('click', function() {
      var active = d.active ? false : true,
        opacity = active ? 0 : 1;
      // Hide or show the elements based on the ID
      d3.select("#tag" + d.key.replace(/[ )(]/g, ''))
        .style("opacity", opacity);
      // Update whether or not the elements are active
      d.active = active;
    })
    .text(d.key);

  // text label for the x axis
  vis.append("text")
    .attr("transform",
      "translate(" + (WIDTH / 2) + " ," +
      (HEIGHT + 30) + ")")
    .style("text-anchor", "middle")
    .text("Date");

  // text label for the y axis
  vis.append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 0 - MARGINS.left) //set y to "5"
    .attr("x", 10 - (HEIGHT / 2))
    .attr("dy", "1em")
    .style("text-anchor", "middle")
    .text("Count");
});

.axis path {
   fill: none;
   stroke: #777;
   shape-rendering: crispEdges;
 }
 
 .axis text {
   font-family: Lato;
   font-size: 13px;
 }
 
 .legend {
   font-size: 14px;
   font-weight: bold;
   cursor: pointer;

<title>D3 Test</title>
<script src="https://d3js.org/d3.v4.js"></script>

<body>
  <svg id="visualisation" width="1000" height="600"></svg>

</body>