我知道這里有一些帖子，今天和昨天我已經努力了幾個小時。但我無法讓輸入、更新、退出在最基本的意義上作業。
我一直在嘗試將我制作的互動式條形圖更改為堆疊條形圖。這根本不起作用，我想嘗試從這里的示例中獲得最簡單的情況。但是，即使這樣我也做不到。我不明白為什么。
const margin = {top: 10, right: 30, bottom: 20, left: 50},
width = 800 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
// append the svg object to the body of the page
const svg = d3.select("#chart")
.append("svg")
.attr("width", width margin.left margin.right)
.attr("height", height margin.top margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// Parse the Data
d3.csv("https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_stacked.csv").then( function(data) {
// List of subgroups = header of the csv files = soil condition here
const subgroups = data.columns.slice(1)
// List of groups = species here = value of the first column called group -> I show them on the X axis
const groups = data.map(d => (d.group))
// Add X axis
const x = d3.scaleBand()
.domain(groups)
.range([0, width])
.padding([0.2])
svg.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x).tickSizeOuter(0));
// Add Y axis
const y = d3.scaleLinear()
.domain([0, 60])
.range([ height, 0 ]);
svg.append("g")
.call(d3.axisLeft(y));
// color palette = one color per subgroup
const color = d3.scaleOrdinal()
.domain(subgroups)
.range(['#e41a1c','#377eb8','#4daf4a'])
//stack the data? --> stack per subgroup
const stackedData = d3.stack()
.keys(subgroups)
(data)
// Show the bars
let bars = svg.append("g")
.selectAll("g")
.data(stackedData, d => d)
bars.join(
enter => {
enter
.append('g')
.attr("fill", d => color(d.key))
.selectAll("rect")
.data(d=>d)
.attr("x", d => x(d.data.group))
.attr("y", d => y(d[1]))
.attr("height", d => y(d[0]) - y(d[1]))
.attr("width",x.bandwidth())
}, update => update, exit => exit.remove());
})
我只在 //Show the bars 之后更改了代碼
如果不是join(enter=> enter)
我只使用enter().append('g)...等。我認為這些在做同樣的事情？
最后，我一直在嘗試直接從 D3 中繪制所有內容。自己做而不是使用 Observable 等地方的現成函式是愚蠢的嗎？我想學習，但我也想提高效率。
感謝您的任何提示和幫助！
uj5u.com熱心網友回復：
- 您需要回傳
enter選擇（您正在使用箭頭函式而不回傳任何內容） - 您需要在
.join('rect')之后執行selectAll('rect').data(d => d)（如果您不加入，則不會將任何內容附加到堆疊的<g>）
這是完整的作業解決方案（單擊下面的運行代碼片段按鈕）：
const margin = {
top: 10,
right: 30,
bottom: 20,
left: 50
},
width = 800 - margin.left - margin.right,
height = 600 - margin.top - margin.bottom;
// append the svg object to the body of the page
const svg = d3
.select("#chart")
.append("svg")
.attr("width", width margin.left margin.right)
.attr("height", height margin.top margin.bottom)
.append("g")
.attr("transform", `translate(${margin.left},${margin.top})`);
// Parse the Data
d3.csv(
"https://raw.githubusercontent.com/holtzy/D3-graph-gallery/master/DATA/data_stacked.csv"
).then(function(data) {
// List of subgroups = header of the csv files = soil condition here
const subgroups = data.columns.slice(1);
// List of groups = species here = value of the first column called group -> I show them on the X axis
const groups = data.map((d) => d.group);
// Add X axis
const x = d3.scaleBand().domain(groups).range([0, width]).padding([0.2]);
svg
.append("g")
.attr("transform", `translate(0, ${height})`)
.call(d3.axisBottom(x).tickSizeOuter(0));
// Add Y axis
const y = d3.scaleLinear().domain([0, 60]).range([height, 0]);
svg.append("g").call(d3.axisLeft(y));
// color palette = one color per subgroup
const color = d3
.scaleOrdinal()
.domain(subgroups)
.range(["#e41a1c", "#377eb8", "#4daf4a"]);
//stack the data? --> stack per subgroup
const stackedData = d3.stack().keys(subgroups)(data);
// Show the bars
let bars = svg
.append("g")
.selectAll("g")
.data(stackedData, (d) => d);
bars.join(
(enter) => {
// don't forget to return the enter selection after appending
return enter
.append("g")
.attr("fill", (d) => color(d.key))
.selectAll("rect")
.data((d) => d)
// don't forget to join 'rect'
.join("rect")
.attr("x", (d) => x(d.data.group))
.attr("y", (d) => y(d[1]))
.attr("height", (d) => y(d[0]) - y(d[1]))
.attr("width", x.bandwidth());
},
(update) => update,
(exit) => exit.remove()
);
});<div id="chart"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.4.3/d3.min.js"></script>轉載請註明出處，本文鏈接：https://www.uj5u.com/net/462642.html
標籤：javascript d3.js