Question

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

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);
  });

- 所以第一行看起来像这样 - 但我认为我缺少enter（）部分

// 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);
  });

当涉及到翻译图例时，如何修复折线图以使线条动画化 - 并修复域名 - 因为现在是一个时间刻度。另外参考两个图表 - 我应该放置＆＃34;制作条形图＆＃34; ＆＃34;制作线条＆＃34;上面看到的代码 - 进入实际函数 - 在更新函数方法中重用 - 对于每个图表？

Answer 1

这里有fiddle根据您的要求制作动画。

相关代码：

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);
    }
  });

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

X轴是一个时间刻度，在您的情况下，您不需要根据城市名称而不是日期更新更新功能中的x轴作为切换。
事件如果你有一个不断变化的X轴，那么你就不会改变这个领域。时间刻度查找日期，似乎您将其设置为城市名称。（＆＃34; newKeys＆＃34）
设置y-domain将基于＆＃34; cities＆＃34;数组，因为您正在使用它来呈现图表。但是在更新功能中，您似乎正在使用＆＃34;数据＆＃34;数组来设置y域，从而设置y轴问题。
也添加了到y轴的过渡。
var paths = svg.selectAll(".line").selectAll("path")不是你想要的，因为你有班级＆＃34; line＆＃34;对于路径本身。相关版本为：svg.selectAll("path.line")
无论如何，路径的过滤不会起作用，因为选择是错误的，就过滤而言，路径正在调用＆＃34; line＆＃34;函数，而代码中的行函数定义为＆＃34; valueline＆＃34;
以与您类似的方式过滤路径将以这种方式正确：

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

希望这会有所帮助。：）

d3js组和折线图动画 - 图例切换

1 个答案: