Question

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

例如：

图表，数据1 = [1,2,3,4,5]; 图表数据2 = [6,7,8,9,10];

单击具有高度2的矩形时，

表示图表1中的第二个元素，所有图表2元素必须使用newdata更新= [4,5,6,7,8]

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

有关如何做到这一点的任何想法？我陷入了控制图表2的困境。

谢谢！

这是我尝试实施上述方案的示例代码

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

单击第一个 - d3js后更新第二个条形图

0 个答案: