我正在使用d3funnel chart。
value: function _makePaths() {
var paths = [];
// Initialize velocity
var dx = this.dx;
var dy = this.dy;
// Initialize starting positions
var prevLeftX = 0;
var prevRightX = this.width;
var prevHeight = 0;
// Start from the bottom for inverted
if (this.isInverted) {
prevLeftX = this.bottomLeftX;
prevRightX = this.width - this.bottomLeftX;
}
// Initialize next positions
var nextLeftX = 0;
var nextRightX = 0;
var nextHeight = 0;
var middle = this.width / 2;
// Move down if there is an initial curve
if (this.isCurved) {
prevHeight = 10;
}
var topBase = this.width;
var bottomBase = 0;
var totalArea = this.height * (this.width + this.bottomWidth) / 2;
var slope = 2 * this.height / (this.width - this.bottomWidth);
// This is greedy in that the section will have a guranteed height and
// the remaining is shared among the ratio, instead of being shared
// according to the remaining minus the guranteed
if (this.minHeight !== false) {
var height = this.height - this.minHeight * this.data.length;
totalArea = height * (this.width + this.bottomWidth) / 2;
}
var totalCount = 0;
var count = 0;
// Harvest total count
for (var i = 0; i < this.data.length; i++) {
totalCount += isArray(this.data[i][1]) ? this.data[i][1][0] : this.data[i][1];
}
//debugger
var scale = d3.scale.linear().range([50, this.width]).domain([0,12000]);
var scaley = d3.scale.linear().range([50, this.height-50 - ((this.height-50) / 2)]).domain([0,12000]);
console.log(this.data)
// Create the path definition for each funnel section
// Remember to loop back to the beginning point for a closed path
for (var i = 0; i < this.data.length; i++) {
count = isArray(this.data[i][1]) ? this.data[i][1][0] : this.data[i][1];
console.log(count)
// Calculate dynamic shapes based on area
/* if(i< 3){
console.log(this.data[i+1][1])
bottomBase = scale(this.data[i+1][1]);
}
else{
//bottomBase = Math.sqrt((slope * topBase * topBase - 4 * area) / slope);
bottomBase = 0;
}
console.log("bottom"+bottomBase+"top"+topBase)
dx = topBase / 2 - bottomBase / 2;
topBase = bottomBase; */
if (this.dynamicArea) {
var ratio = count / totalCount;
var area = ratio * totalArea;
if (this.minHeight !== false) {
area += this.minHeight * (this.width + this.bottomWidth) / 2;
}
if(i< 3){
bottomBase = scale(this.data[i+1][1]);
}
else{
console.log("else"+"topBase"+topBase+"slope"+slope+"area"+area)
console.log("blah"+ (slope * topBase * topBase - 4 * area)/slope)
//bottomBase = Math.sqrt((slope * topBase * topBase - 4 * area) / slope);
bottomBase = topBase;
}
console.log("bottomBase-"+bottomBase)
dx = topBase / 2 - bottomBase / 2;
dy = area * 2 / (topBase + bottomBase);
dy = scaley(this.data[i][1]) ;
if (this.isCurved) {
dy = dy - this.curveHeight / this.data.length;
}
topBase = bottomBase;
}
// Stop velocity for pinched sections
if (this.bottomPinch > 0) {
// Check if we've reached the bottom of the pinch
// If so, stop changing on x
if (!this.isInverted) {
if (i >= this.data.length - this.bottomPinch) {
dx = 0;
}
// Pinch at the first sections relating to the bottom pinch
// Revert back to normal velocity after pinch
} else {
// Revert velocity back to the intial if we are using
// static area's (prevents zero velocity if isInverted
// and bottomPinch are non trivial and dynamicArea is false)
if (!this.dynamicArea) {
dx = this.dx;
}
dx = i < this.bottomPinch ? 0 : dx;
}
}
console.log("dx"+dx)
// Calculate the position of next section
nextLeftX = prevLeftX + dx;
nextRightX = prevRightX - dx;
nextHeight = prevHeight + dy;
// Expand outward if inverted
if (this.isInverted) {
nextLeftX = prevLeftX - dx;
nextRightX = prevRightX + dx;
}
// Plot curved lines
if (this.isCurved) {
paths.push([
// Top Bezier curve
[prevLeftX, prevHeight, 'M'], [middle, prevHeight + (this.curveHeight - 10), 'Q'], [prevRightX, prevHeight, ''],
// Right line
[nextRightX, nextHeight, 'L'],
// Bottom Bezier curve
[nextRightX, nextHeight, 'M'], [middle, nextHeight + this.curveHeight, 'Q'], [nextLeftX, nextHeight, ''],
// Left line
[prevLeftX, prevHeight, 'L']]);
// Plot straight lines
} else {
paths.push([
// Start position
[prevLeftX, prevHeight, 'M'],
// Move to right
[prevRightX, prevHeight, 'L'],
// Move down
[nextRightX, nextHeight, 'L'],
// Move to left
[nextLeftX, nextHeight, 'L'],
// Wrap back to top
[prevLeftX, prevHeight, 'L']]);
}
// Set the next section's previous position
prevLeftX = nextLeftX;
prevRightX = nextRightX;
prevHeight = nextHeight;
}
return paths;
}
在d3中创建漏斗图表。我正在尝试创建一个漏斗图表，该图表在每个级别上也是垂直分隔的。像这张照片中的东西 image of vertically separated funnel chart.
这是我的正常漏斗图代码的小提琴 simple custom funnel chart 我想将它转换为每个级别上垂直分离的漏斗图。 我能对这个功能做些什么改变，以便得到我想要的东西