我正在尝试构建一个条形图，但当我将其加载到本地服务器上时，我在 html 页面上看不到任何内容。
这是我的java脚本:
var formatYear = d3.timeFormat("%Y");
var svg = d3.select('body').select('svg')
const width = d3.select('body').append('svg').attr('width');
const height = d3.select('body').append('svg').attr('height');
// create d3 data join
// load csv file
d3.csv('q3.csv').then(data => {
data.forEach(d => {
d.year = Date(+d.year, 1, 0); //parse data
d.running_total = +d.running_total // parse data
});
render(data);
});
const render = data => {
const xValue = d => d.running_total;
const yValue = d => d.year;
const xScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.running_total)])
.range([0, d3.max(data, d => d.year)]);
const yScale = d3.scaleBand()
.domain(data.map(d => d.year))
.range([0, height]);
svg.selectAll('rect').data(data)
.enter().append('rect')
.attr('y', d => yScale(d.running_total))
.attr('width', d => xScale())
.attr('height', yScale.bandwidth())
};
我首先检查以确保我的数据已正确加载，确实如此。我在控制台上看到它。我认为我的append.()函数有问题，但我在谷歌上进行了广泛的搜索，它们似乎都有相同的概念: 1. 你有一个元素(在本例中为矩形) 2. 你有你的数据 3.将数据追加到元素
这部分代码似乎是错误的，但我似乎无法弄清楚。
这是我的 html 代码:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lego Sets by Year from Rebrickable</title>
<script type="text/javascript" src="lib/d3/d3.min.js"></script>
</head>
<body>
<svg width='960' height='500'></svg>
<script type="text/javascript" src="main1.js"></script>
<h1>Lego Sets by Year from Rebrickable</h1>
<P align=right>xxxxxxx <P>
</body>
</html>
这是我的 csv 文件的第一行:
year running_total
1949 5
最佳答案
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lego Sets by Year from Rebrickable</title>
</head>
<body>
<svg width='960' height='500'></svg>
<h1>Lego Sets by Year from Rebrickable</h1>
<P align=right>xxxxxxx <P>
</body>
<script type="text/javascript" src="https://d3js.org/d3.v5.min.js"></script>
<script type="text/javascript">
var formatYear = d3.timeFormat("%Y");
var svg = d3.select("svg"); // Line 20
const width = svg.attr('width'); // Line 21
const height = svg.attr('height'); // Line 22
// create d3 data join
// load csv file
d3.dsv(" ", "q3.csv").then(data => { // Line 27
data.forEach(d => {
// d.year = Date(+d.year, 1, 0); // Line 29
// d.running_total = +d.running_total // Line 30
});
render(data);
});
const render = data => {
const xScale = d3.scaleLinear()
.domain([0, d3.max(data, d => d.running_total)])
.range([0, width]); // Line 38
const yScale = d3.scaleBand()
.domain(data.map(d => d.year))
.range([0, height])
.padding(0.1); // Line 43
svg.selectAll('rect').data(data)
.enter().append('rect')
.attr("x", 0) // Line 47
.attr('y', d => yScale(d.year)) // Line 48
.attr('width', d => xScale(d.running_total)) // Line 49
.attr('height', yScale.bandwidth())
};
</script>
</html>
您好，我对您的代码做了一些更改。
第 20-22 行，仅保留一个“svg”元素。
第29-30行，无需进行数据解析。如果需要轴格式化，请使用 d3-axis 进行设置.
第 38 行，修复
xScale第 43 行，将填充添加到
yScale第 47-49 行，修复
x,y,widthrect的值第 27 行，使用 d3.dsv
使用的 csv:
year running_total
1949 5
1950 6
1951 7
1952 8
关于javascript - d3 条形图 : Trouble seeing my Graph. 可能存在 append() 问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57882449/