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

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

转载作者：行者123 更新时间：2023-12-03 11:00:32

我对如何从数组中的对象获取数据感到困惑，我已经开发了折线图，但 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>

关于javascript - 如何从 d3.js 中给定的对象数组获取数据，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28115582/

文章推荐： javascript - 从 JSON Href 获取在表中工作的按钮

文章推荐： javascript - 使用 Javascript 更改字幕内容

文章推荐： javascript - 如何在我的例子中添加 dom 元素

行者123

个人简介

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

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

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