首頁猿問當它們不適合內部時，在條形圖外部顯...

當它們不適合內部時，在條形圖外部顯示圖表圖像

JavaScript

墨色風雨 2021-12-23 15:33:37

我有這個代碼Fiddle ，它呈現一個條形圖，圖像位于每個條形的頂部。對于較小的值，我不希望圖像在條形圖內呈現，而是希望它位于條形圖的頂部/外部。例如，第 4 個欄會在欄的頂部而不是內部顯示圖像。是否有一種巧妙的方法來添加條件，因為條形圖將使用不斷變化的數據，因此需要一種方法來確定哪些條形將在外部顯示圖像，哪些將在內部顯示？var w = 750;var h = 300;var barPadding = 2;var dataset2 = [{ "category": "A", "Value": 18, "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png" }, { "category": "B", "Value": 15, "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png" }, { "category": "C", "Value": 13, "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png" }, { "category": "D", "Value": 2, "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png" }, { "category": "E", "Value": 12, "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png" }, { "category": "F", "Value": 15, "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png" }, { "category": "G", "Value": 20, "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png" }, { "category": "H", "Value": 25, "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png" }, { "category": "H", "Value": 30, "URLimage": "https://upload.wikimedia.org/wikipedia/commons/thumb/9/92/Baseball.svg/520px-Baseball.svg.png" }]<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js"></script>

查看完整描述

1 回答

MMMHUHU

TA貢獻1834條經驗獲得超8個贊

一個簡單的條件運算符就足夠了：

.attr("y", function(d) {

return h - (d.Value * 10) - (d.Value * 10 < 40 ? 40 : 0);

})

作為旁注，您應該使用 D3 音階。在您的特定數據集中，值可以很容易地映射到 SVG 坐標，但幾乎從來都不是這樣。

這是帶有該更改的代碼：

var w = 750;

var h = 300;

var barPadding = 2;

var dataset2 = [{

"category": "A",

"Value": 18,