如何从 d3.js 中的给定对象数组中获取数据

How to get the data from given array of objects in d3.js

本文关键字：对象 数组 数据 获取 d3 js      更新时间：2023-09-26

我对如何从数组中的对象获取数据感到困惑，我已经为折线图开发了，但 x 轴问题正在提出，如何解决问题，我的对象在下面给出。

var data=[{"key":[2009,0],"value":200},{"key":[2009,1],"value":201},{"key":[2009,2],"value":204},{"key":[2009,3],"value":204},{"key":[2009,4],"value":206},{"key":[2009,5],"value":200},{"key":[2009,6],"value":100},{"key":[2009,7],"value":208},{"key":[2009,8],"value":600},{"key":[2009,9],"value":290},{"key":[2009,10],"value":270},{"key":[2009,11],"value":400},
{"key":[2010,0],"value":200},{"key":[2010,1],"value":201},{"key":[2010,2],"value":204},{"key":[2010,3],"value":204},{"key":[2010,4],"value":206},{"key":[2010,5],"value":200},{"key":[2010,6],"value":100},{"key":[2010,7],"value":208},{"key":[2010,8],"value":600},{"key":[2010,9],"value":290},{"key":[2010,10],"value":270},{"key":[2010,11],"value":400},
{"key":[2011,0],"value":200},{"key":[2011,1],"value":201},{"key":[2011,2],"value":204},{"key":[2011,3],"value":204},{"key":[2011,4],"value":206},{"key":[2011,5],"value":200},{"key":[2011,6],"value":100},{"key":[2011,7],"value":208},{"key":[2011,8],"value":600},{"key":[2011,9],"value":290},{"key":[2011,10],"value":270},{"key":[2011,11],"value":400}];
var parseDate = d3.time.format("%x").parse
//console.log(data);
//data.forEach(function (d){
//d.key=d.key[1];
//d.value=d.value;
//})
var s1=data.map(function (d,i){return {key:d.key[0],value:d.value}})
console.log(s1);
 var margin = {top: 15, right: 20, bottom: 70, left: 85},
        width = 440,height = 450;
var x=d3.time.scale().domain(d3.extent(s1,function (d,i){return d.key[1]}))
  .range([0,width])
var y=d3.scale.linear().domain(d3.extent(s1,function (d,i){return d.value}))
  .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.key); })
       .y(function(d) { return y(d.value); })
       .interpolate("cardinal")
     var div = d3.select("body")
       .append("div")
       .attr("class", "tooltip")
       .style("opacity", 0);
     var svg = d3.select("body").select("svg")
       .attr("width", width + margin.left + margin.right)
       .attr("height", height + margin.top + margin.bottom)
       .append("g")
       .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
    svg.append("g")
      .attr("class", "x axis x-axis")
      .attr("transform", "translate(0," + height + ")").attr("fill","steelblue")
      .call(xAxis);
     svg.append("g").attr("class", "y axis y-axis").attr("fill","steelblue").call(yAxis)
     svg.append("path").attr("class", "line").attr("d", line(s1));

下面您可以通过调整代码找到折线图。根据约定，确保语句以分号结尾。

您的变量 s1 未正确创建，最后查看如何正确附加该行。

<!DOCTYPE html>
<meta charset="utf-8">
<head>
<style>
  body {
    font: 10px sans-serif;
  }
  .axis path,
  .axis line {
    fill: none;
    stroke: #000;
    shape-rendering: crispEdges;
  }
  .x.axis path {
    display: none;
  }
  .line {
    fill: none;
    stroke: steelblue;
    stroke-width: 1.5px;
  }
</style>
</head>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>
  var data=[{"key":[2009,0],"value":200},{"key":[2009,1],"value":201},{"key":[2009,2],"value":204},{"key":[2009,3],"value":204},{"key":[2009,4],"value":206},{"key":[2009,5],"value":200},{"key":[2009,6],"value":100},{"key":[2009,7],"value":208},{"key":[2009,8],"value":600},{"key":[2009,9],"value":290},{"key":[2009,10],"value":270},{"key":[2009,11],"value":400},
  {"key":[2010,0],"value":200},{"key":[2010,1],"value":201},{"key":[2010,2],"value":204},{"key":[2010,3],"value":204},{"key":[2010,4],"value":206},{"key":[2010,5],"value":200},{"key":[2010,6],"value":100},{"key":[2010,7],"value":208},{"key":[2010,8],"value":600},{"key":[2010,9],"value":290},{"key":[2010,10],"value":270},{"key":[2010,11],"value":400},
  {"key":[2011,0],"value":200},{"key":[2011,1],"value":201},{"key":[2011,2],"value":204},{"key":[2011,3],"value":204},{"key":[2011,4],"value":206},{"key":[2011,5],"value":200},{"key":[2011,6],"value":100},{"key":[2011,7],"value":208},{"key":[2011,8],"value":600},{"key":[2011,9],"value":290},{"key":[2011,10],"value":270},{"key":[2011,11],"value":400}];
  var parseDate = d3.time.format("%x").parse;
  // construct the date according to the parsed format: %m/%d/%Y
  var s1 = data.map(function (d,i){return {key:parseDate((d.key[1]+1)+"/1/"+d.key[0]),value:+d.value}}); 
  console.log(s1);
  var margin = {top: 15, right: 20, bottom: 70, left: 85},
          width = 440,height = 450;
  var x = d3.time.scale().domain(d3.extent(s1,function (d,i){return d.key}))
    .range([0,width]);
  var y = d3.scale.linear().domain(d3.extent(s1,function (d,i){return d.value}))
    .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.key); })
         .y(function(d) { return y(d.value); })
         .interpolate("cardinal");
  var div = d3.select("body")
     .append("div")
     .attr("class", "tooltip")
     .style("opacity", 0);
  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 + ")");
  svg.append("g")
    .attr("class", "x axis x-axis")
    .attr("transform", "translate(0," + height + ")")
    .attr("fill","steelblue")
    .call(xAxis);
  svg.append("g")
    .attr("class", "y axis y-axis")
    .attr("fill","steelblue")
    .call(yAxis);
  svg.append("path")
    .datum(s1)
    .attr("class", "line")
    .attr("d", line);
</script>
</body>
</html>
相关文章：