0

我想创建两个条形图并在单击第一个条形图中的一个 rect 元素时更新第二个条形图。

例如：

带有 data1 = [1,2,3,4,5] 的图表；带有 data2 = [6,7,8,9,10] 的图表；

单击高度为 2 的矩形时，我的意思是图表 1 中的第二个元素，所有图表 2 元素必须更新为 newdata = [4,5,6,7,8]

更新数据后，图表 2 应以蓝色显示旧数据，以黄色显示更新数据。

关于如何做到这一点的任何想法？我被困在控制chart2上。

谢谢！

这是我试图实现上述场景的示例代码

function svg_int(data){

console.log(data);

var svg = d3.selectAll("svg");

var w = 100,
    h = 500,
    barPadding =3,
    scale = 10,
    //max = d3.max(data);
    max = 200000;

var svg = d3.select('#chartDisplay')
    .append("svg")
    .attr("width",w)
    .attr("height",h);

console.log(svg);

var y = d3.scale.linear().range([h,0]),
    yAxis = d3.svg.axis().scale(y).ticks(5).orient("left"),
    x = d3.scale.linear().range([0, w]);

y.domain([0, max]).nice();
x.domain([0, data.length]).nice();

console.log(svg);

var rect = svg.selectAll("rect")
    .data(data, function(d,i) { console.log(i); console.log(d); return i;});

console.log(rect);

rect.enter().append("rect")
    .attr("class","original")
    .attr("x", function(d,i) {return x(i);})
    .attr("y", function(d,i) {console.log(d); return y(d);})
    .attr("width", w / data.length - barPadding)
    .attr("height", function(d) {return h - y(d);})
    .attr("fill", "rgb(90,90,90)");

console.log(rect);

svg.append("svg:g")
    .attr("class", "y axis")
    .attr("transform", "translate(-4,0)")
    .call(yAxis);  

rect.on("click", function(d) {
    console.log(d);
    });

    rect.exit().remove();  }

   data1 = [1,2,3,4,5];
   data2 = [6,7,8,9,10];

   var chart1 = new svg_int(data1);
   var chart2 = new svg_int(data2);
4

0 回答 0