销售渠道图[关闭]

Question

我正在尝试使用d3创建销售渠道图表。 下面是一个例子。 有谁知道我可以开始的示例代码吗？

感谢任何帮助。

Answer 1

对于另一种方法，这是一个完全使用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;
}

演示

Answer 2

在github上有一个安娜·鲍威尔·史密斯 （ Anna Powell-Smith ）的项目，称为Funnel-plots ，可以让您抢先一步。 您将需要预先建立一些定义来呈现它。 有些人觉得这个图是没有意义的 （我碰巧觉得有更好的图），但是人们希望看到它们，因此这里是解决它们的方法。 首先，您需要确定台阶的高度是否均匀且其宽度是否可变（因此，在每一步中，您将宽度减小的幅度与绘制值减小的百分比相同），或者最小值和最大值是由它们的绘制值确定的但是调整了中间步骤的高度，以代表其标绘值（使用每个步骤的体积），这是您问题中参考图表的方法。