Matrix 如何将散点图代码从d3v3更新到d3v4(直方图在d3v4上无法正常工作)

Matrix 如何将散点图代码从d3v3更新到d3v4(直方图在d3v4上无法正常工作),matrix,histogram,Matrix,Histogram,原始代码d3v3 更新至d3v4 (直方图不起作用) 我试图将散点图代码从D3版本3更新到版本4,但我无法使代码正常工作,因为直方图不会更新。如何让它们正常工作,就像在D3版本3上一样 function updateHistograms() { d3.selectAll(".histogram") .remove() ; histCells.each(function(p) { var cell = d3.select(this); histX.domain

原始代码d3v3

更新至d3v4 (直方图不起作用)

我试图将散点图代码从D3版本3更新到版本4,但我无法使代码正常工作,因为直方图不会更新。如何让它们正常工作,就像在D3版本3上一样

function updateHistograms() {
d3.selectAll(".histogram")
  .remove() ;

histCells.each(function(p) {

  var cell = d3.select(this);

  histX.domain(domainByTrait[p.x]);
  
  //y.domain(domainByTrait[p.y]);

  // Filter data down based on selections
  var histData = data.filter(function(d) {
    
    // Has the fuel category been hidden?
    if (!categoryState[d.fuel]) {
        return false ;
    // Is a filter applied and is the point within the bounds of the selected region
    } else if (filterType[0] !== "none") {
       if (filterLimits[0][0] > +d[filterType[0]] || +d[filterType[0]] > filterLimits[0][1] ||
           filterLimits[1][0] > +d[filterType[1]] || +d[filterType[1]] > filterLimits[1][1]) {
        return false ;
       }
    }
    return true ;
  }) ;

  // Extract data for histogramming into single array
  histData = histData.map(function(d) {
    return +d[p.x] ;
  });

  // Generate a histogram using twenty uniformly-spaced bins.
  var hist = d3.histogram()
    .thresholds(histX.ticks(20))
    (histData);

  var histScale = d3.scaleLinear()
  .domain([0, d3.max(hist, function(d) { return d.length; })])
  .range([size - padding / 2, padding / 2]);

  var bar = cell.selectAll(".bar")
    .data(hist)
    .enter().append("g")
    .attr("class", "bar")
    .classed("histogram",true)
    .attr("transform", function(d) {
      return "translate(" + histX(d.x0) + "," + histScale(d.length) + ")";
    });

  bar.append("rect")
  .classed("histogram",true)
  .attr("x", 1)
  .attr("width", 5) //x(hist[0].dx) )
  .attr("height", function(d) {
    return size - padding / 2 - histScale(d.length);
  });

  // Titles for the diagonal.
  //cell.filter(function(d) { return d.i === d.j; }).
  cell.append("text")
  .classed("histogram",true)
  .attr("x", size - padding)
  .attr("y", padding)
  .attr("dy", ".71em")
  .attr("text-anchor","end")
  .text(function(d) { return diagonalNames[d.x]; });
}) ;
}