Charts 更新数据多图表d3.js

我正在使用d3，我遇到了一个问题，那就是如何用一个

.onclick

函数更新多个图表的数据？ 我被卡住了，因为我注意到，

.on（“单击”，函数（d））

只在一个图表中工作

我打算用一个

.onclick

函数更新3个不同的图表

代码如下

var margin = { top: 50, right: 0, bottom: 20, left: 40 },
    width = 600 - margin.left - margin.right,
    height = 300 - margin.top - margin.bottom,
    gridSize = Math.floor(width / 24),
    legendElementWidth = gridSize * 2,
    buckets = 9,
    barPadding = 1,
    colors = colorbrewer.GnBu[9],
    days = ["Lun", "Mar", "Mer", "Gio", "Ven", "Sab", "Dom"],
    times = ["01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23", "24"]; 

d3.tsv("data/data.tsv",
    function(d) {
      return {
        day: +d.day,
        hour: +d.hour,
        value: +d.value
      };
    },
    function(error, data) {
        var colorScale = d3.scale.quantile()
                            .domain([0, buckets - 1, d3.max(data, function (d) { return d.value; })])
                            .range(colors);

        var svg = d3.select("#chart").append("svg")
                    .attr("width", width + margin.left + margin.right)
                    .attr("height", height)
                    .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
                    .attr("class","chart");

        var dayLabels = svg.selectAll(".dayLabel")
                           .data(days)
                           .enter().append("text")
                           .text(function (d) { return d; })
                           .attr("x", 0)
                           .attr("y", function (d, i) { return i * gridSize; })
                           .style("text-anchor", "end")
                           .attr("transform", "translate(-6," + gridSize / 1.5 + ")")
                           .attr("class", function (d, i) { return ((i >= 0 && i <= 4) ? "dayLabel mono axis axis-workweek" : "dayLabel mono axis"); });

        var timeLabels = svg.selectAll(".timeLabel")
                            .data(times)
                            .enter().append("text")
                            .text(function(d) { return d; })
                            .attr("x", function(d, i) { return i * gridSize; })
                            .attr("y", 0)
                            .style("text-anchor", "middle")
                            .attr("transform", "translate(" + gridSize / 2 + ", -6)")
                            .attr("class", function(d, i) { return ((i >= 7 && i <= 16) ? "timeLabel mono axis axis-worktime" : "timeLabel mono axis"); });

        var heatMap = svg.selectAll(".hour")
                         .data(data)
                         .enter().append("rect")
                         .attr("x", function(d) { return (d.hour - 1) * gridSize; })
                         .attr("y", function(d) { return (d.day - 1) * gridSize; })
                         .attr("rx", 4)
                         .attr("ry", 4)
                         .attr("class", "hour bordered")
                         .attr("width", gridSize)
                         .attr("height", gridSize)
                         .style("fill", colors[0])
                         .on("mouseover", function(d) {
                            d3.select(this)
                                .style("fill","red");
                         })
                         .on("mouseout", function(d) {
                             d3.select(this)
                               .transition()
                               .duration(120)
                               .style("fill", function(d) { return colorScale(d.value); })
                         });
                         heatMap.transition().duration(1000)
                         .style("fill", function(d) { return colorScale(d.value); })
                         heatMap.append("title").text(function(d) { return d.value; })

    });

// HOURLY TRAFFIC//

d3.tsv("data/pisa_traffic_hourly.tsv", function(error, data) {
    data.forEach(function(d) {
        d.count = +d.count;
    });

var x = d3.scale.ordinal()
          .rangeRoundBands([0, width], .1);

var y = d3.scale.linear()
          .range([height, 0]);

var xAxis = d3.svg.axis()
              .scale(x)
              .orient("top");

var yAxis = d3.svg.axis()
              .scale(y)
              .orient("left")

var svg2 = d3.select("#tab").append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + 4)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")")
            .attr("class","tab");



      x.domain(data.map(function(d) { return d.h; }));
      y.domain([0, d3.max(data, function(d) { return d.count; })]);


      var colorScale = d3.scale.quantile()
                         .domain([0, buckets - 1, d3.max(data, function (d) { return d.count; })])
                         .range(colors);


      svg2.append("g")
          .attr("class", "y axis")
          .call(yAxis)
          .append("text")
          .attr("transform", "rotate(-90)")
          .attr("y", 6)
          .attr("dy", ".71em")
          .style("text-anchor", "end")

      svg2.selectAll(".bar")
          .data(data)
          .enter()
          .append("rect")
          .attr("class", "bar")
          .attr("x", function(d) { return x(d.h); })
          .attr("width", x.rangeBand())
          .attr("y", function(d) { return y(d.count); })
          .attr("height", function(d) { return height - y(d.count); })
          .style("fill", colors[0])
          .style("fill", function(d) { return colorScale(d.count); })
          .on("mouseover", function(d) {
            d3.select(this)
                .style("fill","red");
          })
          .on("mouseout", function(d) {
            d3.select(this)
              .transition()
              .duration(120)
              .style("fill", function(d) { return colorScale(d.count); })   
          });

});



d3.tsv("data/pisa_traffic_daily.tsv", type, function(error, data) { 


    var colorScale = d3.scale.quantile()
                         .domain([0, buckets - 1, d3.max(data, function (d) { return d.count; })])
                         .range(colors);


    var x = d3.scale.linear()
        .domain([0, d3.max(data)])
        .range([0, 420]);

    var y = d3.scale.ordinal()
        .domain(data)
        .rangeBands([0, 160]);

    var xAxis = d3.svg.axis()
           .scale(x)
           .orient("top")
           .ticks(5);

    var chart = d3.select("#tab2").append("svg")
        .attr("width", 440)
        .attr("height",235)
        .append("g")
        .attr("transform", "translate(10,50)");

    x.domain([0, d3.max(data, function(d) { return d.count; })]);
    y.domain(data.map(function(d) { return d.day; }));


        chart.selectAll("rect")
            .data(data)
            .enter().append("rect")
            .attr("y", function(d) { return y(d.day); })
            .attr("width", function(d) { return (x(d.count) - x(0)); })
            .attr("height", y.rangeBand())
            .style("fill", colors[0])
          .style("fill", function(d) { return colorScale(d.count); })
            .style("stroke","white")
            .on("mouseover", function(d) {
            d3.select(this)
              .style("fill","red");
            })
        .on("mouseout", function(d) {
            d3.select(this)
              .transition()
              .duration(120)
              .style("fill", function(d) { return colorScale(d.count); })   
        });

        chart.selectAll("text")
            .data(data)
            .enter().append("text")
            .attr("x", function(d) { return x(d.count);})
            .attr("y", function(d) { return y(d.day); })
            .attr("dx", "-.15em")
            .attr("dy", ".87em")
            .attr("font-family", "sans-serif")
            .attr("font-size", "20px")
            .attr("text-anchor", "end")
            .attr("fill","white")
            .text(function(d) {
                return d.count; }
                );
        chart.append("g")
            .attr("class", "x axis")
            .call(xAxis)



        d3.select("p")
            .on("click", function() {

                d3.tsv("data/pisa_out_daily.tsv", function(error, data) {
                    function type(d) {
                      d.count = +d.count;
                      return d;
                    }
                    chart.selectAll("rect")
                        .data(data)
                        .transition()
                        .attr("y", function(d) { return y(d.day); })
                        .attr("width", function(d) { return (x(d.count) - x(0)); })
                        .attr("height", y.rangeBand())
                        .style("fill", colors[0])
                        .style("fill", function(d) { return colorScale(d.count); })
                        .style("stroke","white")

                    chart.selectAll("text")
                    .data(data)
                    .attr("x", function(d) { return x(d.count);})
                    .attr("y", function(d) { return y(d.day); })
                    .text(function(d) {
                        return d.count; }
                        );
                    });
                d3.tsv("data/pisa_out_hourly.tsv", function(error, data) {
                    function type(d) {
                      d.count = +d.count;
                      return d;
                    }
                    svg2.selectAll(".bar")
                          .data(data)
                          .attr("x", function(d) { return x(d.h); })
                          .attr("width", x.rangeBand())
                          .attr("y", function(d) { return y(d.count); })
                          .attr("height", function(d) { return height - y(d.count); })
                          .style("fill", colors[0])
                          .style("fill", function(d) { return colorScale(d.count); })
                    });





            });



    });


function type(d) {
  d.count = +d.count;
  return d;
}

var margin={top:50，right:0，bottom:20，left:40}，
宽度=600-边距。左侧-边距。右侧，
高度=300-margin.top-margin.bottom，
网格尺寸=数学地板（宽度/24），
LegendlementWidth=gridSize*2，
桶=9，
barPadding=1，
colors=colorbrewer.GnBu[9]，
天数=[“Lun”、“Mar”、“Mer”、“Gio”、“Ven”、“Sab”、“Dom”]，
次数=[“01”、“02”、“03”、“04”、“05”、“06”、“07”、“08”、“09”、“10”、“11”、“12”、“13”、“14”、“15”、“16”、“17”、“18”、“19”、“20”、“21”、“22”、“23”、“24”]；
d3.tsv（“数据/数据.tsv”，
职能（d）{
返回{
日：+d.day，
小时：+d.hour，
值：+d.value
};
},
函数（错误、数据）{
var colorScale=d3.scale.quantile（）
.domain（[0，bucket-1，d3.max（数据，函数（d）{返回d.value；}）]）
.范围（颜色）；
var svg=d3.选择（“图表”）.追加（“svg”）
.attr（“宽度”，宽度+边距。左侧+边距。右侧）
.attr（“高度”，高度）
.附加（“g”）
.attr（“转换”、“平移”（“+margin.left+”，“+margin.top+”）
.attr（“类别”、“图表”）；
var dayLabels=svg.selectAll（“.dayLabel”）
.数据（天）
.enter（）.append（“文本”）
.text（函数（d）{return d；}）
.attr（“x”，0）
.attr（“y”，函数（d，i）{return i*gridSize；}）
.style（“文本锚定”、“结束”）
.attr（“转换”、“平移（-6“+gridSize/1.5+”））
.attr（“类”，函数（d，i）{return（（i>=0&&i=7&&i）看起来您的代码已经在更新多个图表了（
chart
和
svg2
）。这怎么对你不起作用？它只更新图表，而控制台在svg2上出现错误，问题是如果我在图表外定义onclick，它对两个都不起作用。我想知道是否有解决问题的方法。啊，对。我想你要做的是嵌套
d3.tsv
调用，以便一切都正常猪油在同一范围内。没错！事实上，我单独加载所有3个d3.tsv是一个障碍