我在D3.js上遇到了麻烦。
我试图为每个数据集名称绘制不同颜色的矩形
（例如，蓝色的为fixed_asset，红色为current_asset），
但是只有一种类型的框是用以下代码绘制的。
任何建议都欢迎。
var dataset = [
{
"fixed_asset":100,
"current_asset":150,
"equity":50,
"long-term_liabilities":100,
"short-term_liabilities":150,
"revenue":400,
"operating_income":150,
"ebit":100,
"ebt":50,
"net_income":35
},
{
"fixed_asset":100,
"current_asset":150,
"equity":50,
"long-term_liabilities":100,
"short-term_liabilities":150,
"revenue":400,
"operating_income":150,
"ebit":100,
"ebt":50,
"net_income":35
}
];
var w = 400;
var h = 300;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var padding_left = 20;
var padding_bottom = 30;
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("fill", "blue")
.attr("x", function(d, i){return i * 100 + padding_left;})
.attr("y", function(d){return h - padding_bottom - d["fixed_asset"];})
.attr("width", 20)
.attr("height", function(d){return d["fixed_asset"];});
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
.attr("fill", "red")
.attr("x", function(d, i){return i * 100 + padding_left;})
.attr("y", function(d){return h - padding_bottom - d["fixed_asset"] - d["current_asset"];})
.attr("width", 20)
.attr("height", function(d){return d["current_asset"];});
最佳答案
当您致电：
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
...
svg.selectAll("rect")
.data(dataset)
.enter()
.append("rect")
...
您将重新绑定数据并计算两次回车选择。第一个块起作用是因为数据是新的（已输入），但第二个块却不起作用，因为它是相同的数据（未输入任何内容）。
您完全不需要在这里重新绑定数据。只需保留对enter选择的引用并附加两个矩形即可：
<!DOCTYPE html>
<html>
<head>
<script data-require="[email protected]" data-semver="3.5.3" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.js"></script>
</head>
<body>
<script>
var dataset = [
{
"fixed_asset":100,
"current_asset":150,
"equity":50,
"long-term_liabilities":100,
"short-term_liabilities":150,
"revenue":400,
"operating_income":150,
"ebit":100,
"ebt":50,
"net_income":35
},
{
"fixed_asset":100,
"current_asset":150,
"equity":50,
"long-term_liabilities":100,
"short-term_liabilities":150,
"revenue":400,
"operating_income":150,
"ebit":100,
"ebt":50,
"net_income":35
}
];
var w = 400;
var h = 300;
var svg = d3.select("body")
.append("svg")
.attr("width", w)
.attr("height", h);
var padding_left = 20;
var padding_bottom = 30;
// keep reference to enter selection
var eS = svg.selectAll("rect")
.data(dataset)
.enter();
// first rect
eS
.append("rect")
.attr("fill", "blue")
.attr("x", function(d, i){return i * 100 + padding_left;})
.attr("y", function(d){return h - padding_bottom - d["fixed_asset"];})
.attr("width", 20)
.attr("height", function(d){return d["fixed_asset"];});
// second rect
eS
.append("rect")
.attr("fill", "red")
.attr("x", function(d, i){return i * 100 + padding_left;})
.attr("y", function(d){return h - padding_bottom - d["fixed_asset"] - d["current_asset"];})
.attr("width", 20)
.attr("height", function(d){return d["current_asset"];});
</script>
</body>
</html>