我正在尝试使用 d3 创建销售管道图。下面是一个例子。有谁知道我可以开始的任何示例代码？
感谢任何帮助。
问问题
4120 次
2 回答
3
对于不同的方法，这里是一个完全使用 CSS 的示例：
<div id='chart'>
<div id='plotA'> </div>
<div id='plotB'> </div>
<div id='plotC'> </div>
<div id='plotD'> </div>
<div id='plotE'> </div>
</div>
#chart {
text-align: center;
}
#chart div {
margin-top: 2px;
}
#plotA {
border-top: 5px solid #3B5592;
border-left: 2px solid transparent;
border-right: 2px solid transparent;
height: 0; width: 200px;
}
#plotB {
border-top: 100px solid #BF2E2B;
border-left: 50px solid transparent;
border-right: 50px solid transparent;
height: 0; width: 100px;
}
#plotC {
margin-left: 50px;
border-top: 50px solid #8CB638;
border-left: 25px solid transparent;
border-right: 25px solid transparent;
height: 0; width: 50px;
}
#plotD {
margin-left: 74px;
border-top: 23px solid #684A94;
border-left: 16px solid transparent;
border-right: 16px solid transparent;
height: 0; width: 18px;
}
#plotE {
margin-left: 90px;
border-top: 15px solid #24A4C7;
border-left: 7px solid transparent;
border-right: 7px solid transparent;
height: 0; width: 4px;
}
于 2012-09-28T20:26:56.993 回答
1
Anna Powell-Smith在 github 上有一个名为funnel-plots的项目，它可以让您抢占先机。您将需要预先建立一些定义来呈现它。有人觉得这张图有点意思（我碰巧觉得有更好的图表），但它们是人们期望看到的，所以这里是你可以解决它们的方法。首先，您需要确定步骤是否具有统一的高度并且它们的宽度是可变的（因此在每个步骤中，您将宽度减小的百分比与绘制值减小的百分比相同）或者最小值和最大值是否由它们的绘制值确定但是调整中间台阶的高度以表示它们的绘制值（使用每个台阶的体积），这是您问题中引用图表的方法。
于 2012-09-28T16:36:17.140 回答