Question

我有一个带有地图和条形图的D3可视化。我试图使条形图根据单击地图上的哪个圆圈而改变。不确定如何执行此操作。我的bar_chart.js文件中有一个名为update（newData）的函数，以及地图上不同圆圈的一些额外数组。 Here是指向地图和bar char的bl.ocks的链接。

地图的js代码

var myData = [21, 3, 5, 21, 15];
//Width and height
var w = 200;
var h = 125;
var yScale = null;

function draw(initialData) {
  var xScale = d3.scale.ordinal()
    .domain(d3.range(initialData.length))
    .rangeRoundBands([0, w], 0.05);

  yScale = d3.scale.linear()
    .domain([0, d3.max(initialData)])
    .range([0, h]);

  //Create SVG element
  var svg = d3.select("#chart")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

  svg.selectAll("rect")
    .data(initialData)
    .enter()
    .append("rect")
    .attr("x", function(d, i) {
      return xScale(i);
    })
    .attr("y", function(d) {
      return h - yScale(d);
    })
    .attr("width", xScale.rangeBand())
    .attr("height", function(d) {
      return yScale(d);
    })
    .attr("fill", "steelblue");

  svg.selectAll("text")
    .data(initialData)
    .enter()
    .append("text")
    .text(function(d) {
      return d;
    })
    .attr("text-anchor", "middle")
    .attr("x", function(d, i) {
      return xScale(i) + xScale.rangeBand() / 2;
    })
    .attr("y", function(d) {
      return h - yScale(d) + 14;
    })
    .attr("font-family", "sans-serif")
    .attr("font-size", "11px")
    .attr("fill", "white");
}

draw(myData);

//update function
function update(newData) {
  yScale.domain([0, d3.max(newData)]);

  var rects = d3.select("#chart svg")
    .selectAll("rect")
    .data(newData);

  // enter selection
  rects
    .enter().append("rect");

  // update selection
  rects
    .transition()
    .duration(300)
    .attr("y", function(d) {
      return h - yScale(d);
    })
    .attr("height", function(d) {
      return yScale(d);
    })

  // exit selection
  rects
    .exit().remove();

  var texts = d3.select("#chart svg")
    .selectAll("text")
    .data(newData);

  // enter selection
  texts
    .enter().append("rect");

  // update selection
  texts
    .transition()
    .duration(300)
    .attr("y", function(d) {
      return h - yScale(d) + 14;
    })
    .text(function(d) {
      return d;
    })

  // exit selection
  texts
    .exit().remove();
}

var mk = [10,17,20,14,8];
var cn = [18,4,9,20,15];
var nd = [5,12,7,15,21];

d3.select("#update").on("click", function() { update(newData); });

Answer 1

您必须将条形图数据合并到cities.csv文件中。

在cities.csv的单击处理程序中，您需要在其中显示工具提示，您必须将数据从CSV转换为数组，然后使用该数组调用条形图update()方法。

一种方法是将条形图数据中的,替换为另一个字符，并拆分字符串并将零件转换为数字。

var cityData = d.barchart.split('#').map(Number);
update(cityData);

您还必须设置条形图的新rect和text的属性。如果条形数量改变，x位置也会改变。

D3条件条形图

1 个答案: