销售渠道图

Question

我正在尝试使用d3创建一个销售流水线图表。下面是一个例子。有没有人知道我可以开始学习的示例代码？

​

​

感谢任何人的帮助。

Answer 1

在github上有一个由Anna Powell-Smith开发的名为funnel-plots的项目，它可以让你领先一步。你需要预先建立一些定义来渲染它。有些人认为这个图是kind of meaningless的(我碰巧觉得有更好的图)，但它们是人们期望看到的东西，所以这里是如何解决它们的。首先，您需要确定步骤是否具有统一的高度和宽度是可变的(因此，在每个步骤中，您将以绘制值减少的相同百分比减少宽度)，或者是否最小和最大值由它们的绘图值确定，但中间步骤的高度被调整以表示它们的绘制值(使用每个步骤的体积)，这就是您问题中引用的图表的方法。

Answer 2

对于一种不同的方法，这里有一个完全使用CSS的示例：

<div id='chart'>
  <div id='plotA'>&nbsp;</div>
  <div id='plotB'>&nbsp;</div>
  <div id='plotC'>&nbsp;</div>
  <div id='plotD'>&nbsp;</div>
  <div id='plotE'>&nbsp;</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;
}

with a demo