當d3.js中的資料更改時，條形圖刻度標簽不會更新

這是我的完整作業代碼

const outerWidth = 600;
const outerHeight = 300;
const margin = 60;
const height = outerHeight - 2*margin;
const width = outerWidth - 2*margin;

var data = [
{ group: 'A', value: 5 },
{ group: 'B', value: 15 },
{ group: 'C', value: 10 },
{ group: 'D', value: 15 },
{ group: 'E', value: 10 },
{ group: 'F', value: 5 },
];

const update = (data)=>{
const svg = d3.select("#containerSvg")
.attr("width", outerWidth)
.attr("height", outerHeight);

const graph = svg
.select("#graphGroup")
.attr("transform", "translate("   margin   ","   margin  ")");

const sx = d3.scaleBand()
.domain(data.map(d => d.group))
.range([0, width])
.padding(.1);
const maxing = d3.max(data.map(d=> d.value))
const sy = d3.scaleLinear()
.domain([0, maxing])
.range([height, 0]);

const getUnique = [...new Set(data.map(d => d.value))].sort(d3.ascending)
//console.log(getUnique);
// you can see what is happening in console while updating data
// every time unique values are not three as we have expected as tick label it may more then that
// how can we reduce the array length according to the tick points and there i want to show there [Low, Medium , High]
const tickScale = d3.scaleOrdinal()
.domain([...new Set(data.map(d => d.value))].sort(d3.ascending))
.range(["Low", "Medium", "High"])
.unknown("");

const xAxis = d3.axisBottom(sx);
const yAxis = d3.axisLeft(sy)
.ticks(3)
.tickFormat(tickScale);
const bar = graph.selectAll(".bar").data(data);

bar.join("rect")
.attr('class', 'bar')
.attr("x", d => sx(d.group))
.attr("y", d => sy(d.value))
.attr("width", sx.bandwidth())
.attr("height", d => height - sy(d.value));

svg.select("#XAxis")
.attr("transform", "translate(0,"   height   ")")
.call(xAxis)

svg.select("#YAxis")
.call(yAxis)
}

update(data);

const buttonData1Access = document.getElementById("Data-button1")
const buttonData2Access = document.getElementById("Data-button2")
const buttonData3Access = document.getElementById("Data-button3")
const buttonData4Access = document.getElementById("Data-button4")

buttonData1Access.addEventListener("click" , (e)=>{
data = [
{ group: 'A', value: 5 },
{ group: 'B', value: 15 },
{ group: 'C', value: 10 },
{ group: 'D', value: 15 },
{ group: 'E', value: 10 },
{ group: 'F', value: 5 },
]
update(data);
})
buttonData2Access.addEventListener("click" , (e)=>{
data = [
{ group: 'y', value: 9 },
{ group: 'o', value: 3 },
{ group: 'u', value: 1 },
{ group: 'D', value: 8 },
{ group: 'E', value: 17 },
{ group: 'F', value: 5 },
]
update(data);
})
buttonData3Access.addEventListener("click" , (e)=>{
data = [
{ group: 'D', value: 1 },
{ group: 'E', value: 3 },
{ group: 'F', value: 9 },
{ group: 'y', value: 9 },
{ group: 'o', value: 3 },
{ group: 'u', value: 1 },
]
update(data);
})
buttonData4Access.addEventListener("click" , (e)=>{
data = [
{ group: 'y', value: 9 },
{ group: 'o', value: 3 },
{ group: 'u', value: 1 },
{ group: 'D', value: 8 },
{ group: 'E', value: 17 },
{ group: 'F', value: 5 },
]
update(data);
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.6.1/d3.min.js"></script>
<div class="centered">
  <button class="button cancel-button" id="Data-button1">Data 1</button>
  <button class="button accept-button" id="Data-button2">Data 2</button>
   <button class="button cancel-button" id="Data-button3">Data 3</button>
  <button class="button accept-button" id="Data-button4">Data 4</button>
</div>
<svg id="containerSvg">
  <g id="graphGroup">
     <g id="XAxis"></g>
     <g id="YAxis"></g>
  </g>

</svg>

每當我用 y 軸中的新資料標簽更新圖表時，沒有根據新資料和刻度點正確更新，似乎標簽點正在參考舊資料值，而 y 軸中的另一件事陣列值并不總是和滴答點一樣

錯誤

好像這是我做錯的部分，你可以看到這段代碼

const maxing = d3.max(data.map(d=> d.value))
    const sy = d3.scaleLinear()
    .domain([0, maxing])
    .range([height, 0]);

    const getUnique = [...new Set(data.map(d => d.value))].sort(d3.ascending)
    //console.log(getUnique);
    // you can see what is happening in console while updating data
    // every time unique values are not three as we have expected as tick label it may more then that
    // how can we reduce the array length according to the tick points and there i want to show there [Low, Medium , High]
    const tickScale = d3.scaleOrdinal()
    .domain([...new Set(data.map(d => d.value))].sort(d3.ascending))
    .range(["Low", "Medium", "High"])
    .unknown("");

    const xAxis = d3.axisBottom(sx);
    const yAxis = d3.axisLeft(sy)
    .ticks(3)
    .tickFormat(tickScale);
    const bar = graph.selectAll(".bar").data(data);

我想用 3 個刻度正確更新 y 軸實驗室，[low, medium, high]即使資料發生變化，每個點上的這些資料也是如此

我希望有人能幫助我

謝謝提前！

uj5u.com熱心網友回復：

如果我理解得很好，無論輸入資料是什么，您總是希望在 Y 軸上有 3 個標簽“低”、“中”、“高”？在這種情況下，您可以簡單地使用基于輸入域的序數比例：

const maxing = d3.max(data.map(d=> d.value));
const yAxisDomain = [0, maxing / 3, 2 * maxing / 3, maxing];
const tickScale = d3.scaleOrdinal()
  .domain(yAxisDomain)
  .range([height, 2 * height / 3, height / 3, 0]);

此刻度用于 Y 軸以均勻放置刻度。然后，您可以使用另一個序數比例將值映射到標簽：

const yAxis = d3.axisLeft(tickScale)
  .tickValues(yAxisDomain)
  .tickFormat(d3.scaleOrdinal(yAxisDomain, ["0", "Low", "Medium", "High"]));

我使用該tickValues函式而不是ticks確保軸上有 3 個刻度。

這是一個例子：https ://codepen.io/ccasenove/pen/oNyxQXK

標籤：javascript反应d3.js可视化

上一篇：有沒有辦法給這個腳本添加一個后綴？

下一篇：D3.js-使用三角函式進行行追加的明顯錯誤