我無法弄清楚為什么我的元素會滲入底部填充物。它阻止我擁有一個元素。我相信這很簡單，它總是如此。我只是不知道出了什么問題。我試過改變高度和比例，但它只是改變了我不想改變的東西。我一直在看有關秤的教程，但沒有發現任何似乎不對勁的東西。如果我在 codepen 上有專案，這里是鏈接：
這是javascript：
//Mapping dataset to its x and y axes
const xData = dataset.map(d => {
let date = new Date(d[0]);
return date;
});
const xDates = xData.map(d => {
let dateFormatted = d.toLocaleString("default", {month: "short"}) ' ' d.getDate() ', ' d.getFullYear()
return dateFormatted;
});
const yData = dataset.map(d => d[1]);
//Variable for use inside D3
const h = 400;
const w = 800;
const pad = 40;
//Scales for the SVG element
const xDateScale = d3.scaleTime()
.domain([0, w])
.range([pad, w - pad]);
const xScale = d3.scaleLinear()
.domain([0, yData.length])
.range([pad, w - pad]);
const yScale = d3.scaleLinear()
.domain([0, d3.max(yData, (d) => d)])
.range([h - pad, pad]);
//Declaring the SVG element
const svg = d3.select('#svg-container')
.append('svg')
.attr('width', w)
.attr('height', h)
//Declaring each bar
svg.selectAll('rect')
.data(yData)
.enter()
.append('rect')
.attr('x', (d, i) => xScale(i))
.attr('y', (d, i) => yScale(d))
.attr("width", w / (yData.length - pad * 2))
.attr("height", (d, i) => d)
.attr("class", "bar")
.append('title')
.text((d, i) => 'GDP: ' d ' | Date: ' xDates[i])
//Axes Declarations
const xAxis = d3.axisBottom(xDateScale);
const yAxis = d3.axisLeft(yScale);
svg.append("g")
.attr("transform", "translate(0," (h - pad / 2) ")")
.call(xAxis);
svg.append("g")
.attr("transform", "translate(" pad ",0)")
.call(yAxis)
uj5u.com熱心網友回復：
問題是你沒有為你的 s使用正確的height屬性值rect
只需進行以下更改，它應該可以作業：
.attr("height", (d, i) => yScale(0) - yScale(d))
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/427206.html
標籤：javascript d3.js
下一篇：D3.js如何獲取變換屬性的值