d3js组和折线图动画 - 图例切换 [英] d3js group and line chart animation - legend toggling

问题描述

我正在尝试构建此组图表的折线图 - 使用图例切换。我不确定我的动画是否正确 - 并希望在结构方面基本上使图表成为姐妹。

I am trying to build a line chart equilvant of this group chart - with legend toggling. I am not sure I've got the animation correct - and want to essentially make the charts sisters in terms of structure.

//组图
http://jsfiddle.net/0ht35rpb/259/

//折线图
http://jsfiddle.net/0ht35rpb/262/

g.append("g")
  .selectAll("g")
  .data(data)
  .enter().append("g")
  .attr("class", "bar")
  .attr("transform", function(d) {
    return "translate(" + x0(d.State) + ",0)";
  })
  .selectAll("rect")
  .data(function(d) {
    return keys.map(function(key) {
      return { key: key, value: d[key]};
    });
  })
  .enter().append("rect")
  .attr("x", function(d) {
    return x1(d.key);
  })
  .attr("y", function(d) {
    return y(d.value);
  })
  .attr("width", x1.bandwidth())
  .attr("height", function(d) {
    return height - y(d.value);
  })
  .attr("fill", function(d, i) {            
    return z(d.key);
  });

- 所以第一行看起来像这样 - 但我想我缺少输入（）部分

-- so the line one looks like this - but I think I am missing enter() parts

// define the line
var valueline = d3.line()
    .curve(d3.curveBasis)
    .x(function(d) { 
      return x(parseTime(d.date));
     })
    .y(function(d) { 
      return y(d.temperature); 
    });

g.selectAll(".city")
  .data(cities)
  .enter().append("g")
  .attr("class", "city")
  .append("path")
  .attr("class", "line")
  .attr("d", function(d){
    return valueline(d.values);
  })
  .style("stroke", function(d) {
    return z(d.id);
  });

当涉及切换图例时如何修复折线图以设置线条动画 - 以及修复域名 - 现在是一个时间表。另外参考两个图表 - 我应该将上面看到的make barsmake lines代码放到一个实际函数中 - 在更新函数方法中重用 - 对于每个图表？

also when it comes to toggling the legends how do I fix the line chart to animate the lines - and fix the domains - as one is now a timescale. Also in reference to both charts - should I place the "make bars" "make lines" code seen above - into an actual function - that gets reused during the update function method - for each chart?

推荐答案

这是一个小提琴根据您的要求有动画。

Here's a fiddle that has the animations as per your requirement.

相关代码：

y.domain([
  d3.min(cities, function(c) {
  if(filtered.indexOf(c.id) === -1) {
    return d3.min(c.values, function(d) {
      return d.temperature;
    });
    }
  }),
  d3.max(cities, function(c) {
  if(filtered.indexOf(c.id) === -1) {
    return d3.max(c.values, function(d) {
      return d.temperature;
    });
    }
  })
]);

  g.select(".axis.axis--y").transition().duration(500)
  .call(d3.axisLeft(y));

    g.selectAll('.city path').transition().duration(500).attr('d', function(d) { 
    if(filtered.indexOf(d.id) > -1) {
        return null;
    } else {
        return valueline(d.values);
    }
  });

您的代码遗漏了很多东西：

Your code was missing a lot of things:

1. X轴是一个时间刻度，在您的情况下，您不需要根据城市名称而不是日期更新更新功能中的x轴作为切换。


2. 事件如果你有一个不断变化的X轴，你就不会改变那个域。时间刻度查找日期，似乎您将其设置为城市名称。 （newKeys）


3. 设置y-domain将基于cities数组，因为您使用它来渲染图表。但是在更新功能中，您似乎使用数据数组来设置y域，从而设置y轴问题。


4. 也添加了到y轴的转换。


5. var paths = svg.selectAll（。line）。selectAll（path）不是你想要的路径本身的line类。相关版本将是： svg.selectAll（path.line）


6. 无论如何，过滤路径不会因为选择错误而工作，就过滤而言，路径调用行函数，而代码中的行函数定义为valueline


7. 过滤以这种方式与你的路径类似的路径是正确的：

1. X axis is a time scale, and in your case, you don't need to update the x-axis in the update function as your toggling based on the city names and not the dates.
2. Event if you had a changing X-axis, you wouldn't change the domain that way. Time scale looks for dates and it seems like you were setting that to the city names. ("newKeys")
3. Setting the y-domain is to be based on the "cities" array as you are using that to render the chart. But in the update function, you seem to be using "data" array to set the y domain and hence the y-axis issue.
4. Added transition to the y-axis too.
5. var paths = svg.selectAll(".line").selectAll("path") is not what you want as you have the class "line" for the path itself. A relevant version would be: svg.selectAll("path.line")
6. Anyway, the filtering of the paths wouldn't work as the selection was wrong and as far as the filtering is concerned, the paths are calling the "line" function whereas the line function in your code is defined as "valueline"
7. Filtering of the paths in a similar fashion as yours would be correct in this way:

  g.selectAll('.city path').transition().duration(500)
    .attr('d', function(d) { 
      if(filtered.indexOf(d.id) > -1) {
          return null;
        } else {
          return valueline(d.values);
      }
      });

希望这会有所帮助。 ：）

Hope this helps. :)

这篇关于d3js组和折线图动画 - 图例切换的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！