Matrix 如何将散点图代码从d3v3更新到d3v4(直方图在d3v4上无法正常工作)
原始代码d3v3 更新至d3v4 (直方图不起作用) 我试图将散点图代码从D3版本3更新到版本4,但我无法使代码正常工作,因为直方图不会更新。如何让它们正常工作,就像在D3版本3上一样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
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]; });
}) ;
}