Question

我根据两个不同地区“伦巴第”和“emiglia”的数据绘制条形图。

以下是对我的代码的了解。首先，我通过过滤“伦巴第”区域绘制图表。现在我想通过转换更新条形图以使用“emiglia”中的“d.value”。

g.select(".gdp").selectAll(".gdp-rect")
  .data(data)
  .enter()
  .append("rect")
  .classed("gdp-rect", true)
  .filter(function(d) {return (d.type == "gdp") })
  .filter(function(d) {return (d.region == "lombardy") })
  .attr('x', function(d, i) {
    return i * (width / 4)
  })
  .attr('y', function(d) {
    return h - yBarScale(d.value)
  })
  .attr('width', width / 4 - barPadding)
  .attr('height', function(d) {
    return yBarScale(d.value)
  })
  .attr("fill", "#CCC")
  .attr("opacity", 1);




function emiglia() {

  g.selectAll(".gdp-rect")
    .transition()
    .duration(600)
    .filter(function(d) {return (d.region == "gdp") })
    .filter(function(d) {return (d.region == "emiglia") })
    .attr('y', function(d) {
      return h - yBarScale(d.value)
    })
    .attr('height', function(d) {
      return yBarScale(d.value)
    })

}

是否可以根据d3.filter进行更新？如何为两个区域切换d.value？

data.tsv

type    region  year    value
gdp lombardy    2004    70
gdp lombardy    2008    50
gdp lombardy    2012    30
gdp lombardy    2016    110
gdp emiglia 2004    10
gdp emiglia 2008    15
gdp emiglia 2012    23
gdp emiglia 2016    70

Answer 1

有几种方法可以做到这一点，这是其中之一：

要在更新功能中使用filter，首先要加载数据......

d3.csv("data.csv", function(data){

...在名为data的数组中。然后，在d3.csv内，您创建更新函数（此处我将其称为draw），将该区域作为参数，并根据此参数过滤data：

function draw(myRegion){

    var newData = data.filter(function(d){ return d.region == myRegion})

现在您使用这个新数组（newData）来绘制条形图。

这是一个使用按钮调用函数draw：https://plnkr.co/edit/QCt1XgWxrSM8MlFijyxb?p=preview

的示例

（警告：在这个例子中我使用的是D3 v4.x，但我看到你正在使用D3 v3。所以，这只是一个让你看到一般想法的例子。）

最后一个提示：通常，我们不会过滤数据来更改此类可视化。正常的方法，让我们称之为 D3方式只是用Lombardy和Emiglia作为列创建数据集：

type   year    lombardy  emiglia
gdp    2004    70        10
gdp    2008    50        15
gdp    2012    30        23
gdp    2016    110       70

这样，我们可以使用：

简单地设置条形的宽度

.attr("width", function(d){ return xScale(d[region])});

根据专栏（Lombardy或Emiglia）设置region。

在更新函数中使用d3.filter

1 个答案: