銷售管道圖表

Question

我正在嘗試使用d3創建銷售管道圖表。下面是一個例子。有誰知道任何示例代碼，我可以開始？

得到任何幫助。

Answer 1

在github上有一個名爲funnel-plots的項目，Anna Powell-Smith可以給你一個良好的開端。您需要預先設定一些定義來呈現此內容。有些人認爲這張圖是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