Question

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

Answer 1

下面通过调整代码找到折线图。确保语句按照约定以分号结尾。

您的变量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>

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

1 个答案: