javascript - 如何在散点图中选择数据点并使用所选的那些数据点更新条形图(How to select datapoints in the scatterplot and update barchart with those datapoints selected)

Question

I have plotted a scatterplot and a barchart.

(我已经绘制了一个散点图和一个条形图。)

I want to link them and update the data in the barchart with the data I select in the scatterplot.

(我想链接它们，并使用在散点图中选择的数据更新条形图中的数据。)

In this jsfiddle I have the two charts.

(在这个jsfiddle中，我有两个图表。)

In the barchart I am visualizing all the data from the dataset.

(在条形图中，我正在可视化数据集中的所有数据。)

How can I show only the data I select on the scatterplot and update the barchart with those data selected on the scatterplot.

(如何仅显示在散点图中选择的数据，并用在散点图中选择的数据更新条形图。)

For ex.

(对于前。)

that I get only these two values ploted in the barchart if I select them in the scatterplot:

(如果我在散点图中选择它们，只会得到条形图中绘制的这两个值：)

 {
    "time": 1,
    "valueA": 2,
    "valueB": 5
  },
  {
    "time": 2,
    "valueA": 3,
    "valueB": 4
  },

to update the barchart.

(更新条形图。)

This is the code I have for the scatterplot and barchart:

(这是散点图和条形图的代码：)

function drawBar(data, selector){

dataset = dataset.map(i => {
  i.time = i.time;
    return i;
});

var container = d3.select(selector),
    width = 400,
    height = 300,
    margin = {top: 30, right: 20, bottom: 30, left: 50},
    barPadding = .2,
    axisTicks = {qty: 5, outerSize: 0, dateFormat: '%m-%d'};

var svg = container
   .append("svg")
   .attr("width", width)
   .attr("height", height)
   .append("g")
   .attr("transform", `translate(${margin.left},${margin.top})`);

var xScale0 = d3.scaleBand().range([0, width - margin.left - margin.right]).padding(barPadding);
var xScale1 = d3.scaleBand();
var yScale = d3.scaleLinear().range([height - margin.top - margin.bottom, 0]);

var xAxis = d3.axisBottom(xScale0).tickSizeOuter(axisTicks.outerSize);
var yAxis = d3.axisLeft(yScale).ticks(axisTicks.qty).tickSizeOuter(axisTicks.outerSize);

xScale0.domain(dataset.map(d => d.time));
xScale1.domain(['valueA', 'valueB']).range([0, xScale0.bandwidth()]);
yScale.domain([0, d3.max(dataset, d => d.valueA > d.valueB ? d.valueA : d.valueB)]);

var time = svg.selectAll(".time")
  .data(dataset)
  .enter().append("g")
  .attr("class", "time")
  .attr("transform", d => `translate(${xScale0(d.time)},0)`);

/* Add valueA bars */
time.selectAll(".bar.valueA")
  .data(d => [d])
  .enter()
  .append("rect")
  .attr("class", "bar valueA")
.style("fill","blue")
  .attr("x", d => xScale1('valueA'))
  .attr("y", d => yScale(d.valueA))
  .attr("width", xScale1.bandwidth())
  .attr("height", d => {
    return height - margin.top - margin.bottom - yScale(d.valueA)
  });

/* Add valueB bars */
time.selectAll(".bar.valueB")
  .data(d => [d])
  .enter()
  .append("rect")
  .attr("class", "bar valueB")
.style("fill","red")
  .attr("x", d => xScale1('valueB'))
  .attr("y", d => yScale(d.valueB))
  .attr("width", xScale1.bandwidth())
  .attr("height", d => {
    return height - margin.top - margin.bottom - yScale(d.valueB)
  });

// Add the X Axis
svg.append("g")
   .attr("class", "x axis")
   .attr("transform", `translate(0,${height - margin.top - margin.bottom})`)
   .call(xAxis);

// Add the Y Axis
svg.append("g")
   .attr("class", "y axis")
   .call(yAxis); 
}

drawBar(dataset, '#my_barchart');

/*
DRAW SCATTERPLOT
*/


//Read the data
function drawLine(data, selector) {


  // set the dimensions and margins of the graph
  var margin = {top: 10, right: 100, bottom: 30, left: 30},
      width = 460 - margin.left - margin.right,
      height = 400 - margin.top - margin.bottom;

  // append the svg object to the body of the page
  var svg = d3.select(selector)
    .append("svg")
      .attr("width", width + margin.left + margin.right)
      .attr("height", height + margin.top + margin.bottom)
    .append("g")
      .attr("transform",
            "translate(" + margin.left + "," + margin.top + ")");

    // List of groups (here I have one group per column)
    var allGroup = ["valueA", "valueB"]

    // Reformat the data: we need an array of arrays of {x, y} tuples
    var dataReady = allGroup.map( function(grpName) { // .map allows to do something for each element of the list
      return {
        name: grpName,
        values: data.map(function(d) {
          return {time: d.time, value: +d[grpName]};
        })
      };
    });
    // I strongly advise to have a look to dataReady with
    // console.log(dataReady)

    // A color scale: one color for each group
    var myColor = d3.scaleOrdinal()
      .domain(allGroup)
      .range(d3.schemeSet2);

    // Add X axis --> it is a date format
    var x = d3.scaleLinear()
      .domain([0,10])
      .range([ 0, width ]);
    svg.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

    // Add Y axis
    var y = d3.scaleLinear()
      .domain( [0,20])
      .range([ height, 0 ]);
    svg.append("g")
      .call(d3.axisLeft(y));

    // Add the lines
    var line = d3.line()
      .x(function(d) { return x(+d.time) })
      .y(function(d) { return y(+d.value) })
    svg.selectAll("myLines")
      .data(dataReady)
      .enter()
      .append("path")
        .attr("d", function(d){ return line(d.values) } )
        .attr("stroke", function(d){ return myColor(d.name) })
        .style("stroke-width", 4)
        .style("fill", "none")

    // Add the points
    svg
      // First we need to enter in a group
      .selectAll("myDots")
      .data(dataReady)
      .enter()
        .append('g')
        .style("fill", function(d){ return myColor(d.name) })
      // Second we need to enter in the 'values' part of this group
      .selectAll("myPoints")
      .data(function(d){ return d.values })
      .enter()
      .append("circle")
        .attr("cx", function(d) { return x(d.time) } )
        .attr("cy", function(d) { return y(d.value) } )
        .attr("r", 5)
        .attr("stroke", "white")

    // Add a legend at the end of each line
    svg
      .selectAll("myLabels")
      .data(dataReady)
      .enter()
        .append('g')
        .append("text")
          .datum(function(d) { return {name: d.name, value: d.values[d.values.length - 1]}; }) // keep only the last value of each time series
          .attr("transform", function(d) { return "translate(" + x(d.value.time) + "," + y(d.value.value) + ")"; }) // Put the text at the position of the last point
          .attr("x", 12) // shift the text a bit more right
          .text(function(d) { return d.name; })
          .style("fill", function(d){ return myColor(d.name) })
          .style("font-size", 15)

}

drawLine(dataset, '#my_scatterplot');

Thank you for any help!

(感谢您的任何帮助！)

  ask by gty1996 translate from so

Answer 1

等待大神答复