Question

我是D3和javascript的新手，所以如果这很明显我道歉。我有一组在Flot中工作的数据，但我似乎无法在d3中识别它，它是没有标识符的json。如

{
"dataLine": [ [134, 43.39], [144, 45.34], [154, 47.45], [164, 48.25], [174, 48.14], [184, 48.21], [194, 47.64], [204, 47.58], [214, 52.18], [224, 58.18], [234, 53.19], [244, 61.28], [254, 56.50], [264, 53.92], [274, 57.27], [284, 58.73], [294, 57.28], [304, 52.91], [314, 55.07], [324, 60.58], [334, 61.16], [344, 62.64], [354, 60.39], [364, 62.79], [372, 65.24] ]
}

如果我添加＆＃34; x＆＃34;我可以使数据正常工作和＆＃34; y＆＃34;每个条目之前的标签，但如何在没有标签的情况下处理数据？假设第一个条目是＆＃34; x＆＃34;第二个条目是＆＃34; y＆＃34;。我目前使用的代码是

d3.json('3.json', function (data) 
{
 data.forEach(function(d) 
 {
   d.x = d.x;
   d.y = d.y;
 });

x.domain(d3.extent(data, function(d) { return d.x; }));
y.domain([0,d3.max(data, function(d) { return d.y; })]);

svg.append("path")
  .datum(data)
  .attr("class", "area")
  .attr("d", area);
  //.attr("d", valueline);


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("Force (N)");
});

数据看起来像

 [
  {"x":134, "y":43.39}, {"x":144, "y":45.34}, {"x":154, "y":47.45}, {"x":164,"y":48.25}, {"x":174, "y":48.14}, {"x":184, "y":48.21}, {"x":194, "y":47.64},  {"x":204, "y":47.58}, {"x":214, "y":52.18}, {"x":224, "y":58.18}, {"x":234, "y":53.19}, {"x":244, "y":61.28}, {"x":254, "y":56.50}, {"x":264, "y":53.92}, {"x":274, "y":57.27}, {"x":284, "y":58.73}, {"x":294, "y":57.28}, {"x":304, "y":52.91}, {"x":314, "y":55.07}, {"x":324, "y":60.58}, {"x":334, "y":61.16}, {"x":344, "y":62.64}, {"x":354, "y":60.39}, {"x":364, "y":62.79}, {"x":372, "y":65.24} 
 ]

我可以像这样绘制图形但是我的所有历史数据都像第一个例子，我知道我做错了，因为我现在只是盲目地关注教程和示例，并且非常感谢任何帮助或提示。为了简单起见，有没有办法绘制我发布的第一组数据？如果是，那么让我更进一步，我将如何绘制该条目＆＃34; dataLine＆＃34;我在同一个json文件中还有5个以上的其他条目，这些条目的格式相同，但标签不同？

Answer 1

对于您的第一个问题，您无需重新格式化数据。 d3提供accessor functions以不同格式获取数据。在您的情况下，对于数组数组，您需要：

var valueline = d3.svg.line()
    .x(function(d) {
      return d[0]; // this really should be x(d[0]) when you properly use scales
    })
    .y(function(d) {
      return d[1]; // this really should be y(d[0]) when you properly use scales
    })

你会绑定到：

svg.append("path")
  .datum(data.valueLine);

你的第二个问题有点困难。为此，您正在考虑使用subselection。说你的数据是：

var data = {
    "dataLine1": [
      [134, 43.39],
      [144, 45.34],
      ...
    ],
    "dataLine2": [
      [224, 58.18],
      [234, 53.19],
      ...
    ],
    "dataLine3": [
      [324, 60.58],
      [334, 61.16],
      ...
    ]
  };

并且您希望每个dataLine都有一行。首先绑定每行的数据：

var myLines = svg.selectAll("line")
    .data(d3.values(data)) // get me an array of 3 arrays
    .enter()
    .append("g")
    .attr("class", "line");

然后创建子选择以创建每个路径：

myLines.append("path")
    .datum(function(d){
      return d; // just return me the array!
    })
    .attr("class", "area")
    .attr("d", valueline) // using the accessor functions above
    .style("fill", "none")
    .style("stroke",function(d,i,j){
      return color(i);
    });

这是一些有效的代码：

<!DOCTYPE html>
<html>

  <head>
    <script data-require="d3@3.5.3" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body>
    <script>

      var svg = d3.select('body')
        .append('svg')
        .attr('width', 500)
        .attr('height', 500);

      var data = {
        "dataLine1": [
          [134, 43.39],
          [144, 45.34],
          [154, 47.45],
          [164, 48.25],
          [174, 48.14],
          [184, 48.21],
          [194, 47.64],
          [204, 47.58],
          [214, 52.18]
        ],
        "dataLine2": [
          [224, 58.18],
          [234, 53.19],
          [244, 61.28],
          [254, 56.50],
          [264, 53.92],
          [274, 57.27],
          [284, 58.73],
          [294, 57.28],
          [304, 52.91],
          [314, 55.07]
        ],
        "dataLine3": [
          [324, 60.58],
          [334, 61.16],
          [344, 62.64],
          [354, 60.39],
          [364, 62.79],
          [372, 65.24]
        ]
      };
      
      var color = d3.scale.category10();
      
      var valueline = d3.svg.line()
        .x(function(d) {
          return d[0];
        })
        .y(function(d) {
          return d[1];
        });

      var myLines = svg.selectAll("line")
        .data(d3.values(data))
        .enter()
        .append("g")
        .attr("class", "line");
        
      myLines.append("path")
        .datum(function(d){
          return d;
        })
        .attr("class", "area")
        .attr("d", valueline)
        .style("fill", "none")
        .style("stroke",function(d,i,j){
          return color(i);
        });

  </script>
  </body>

</html>

处理没有标识符的JSON数据

1 个答案: