Javascript d3.js多种类型的方框

我在D3.js上遇到了麻烦

我尝试为数据集的每个名称绘制不同颜色的矩形 （例如，蓝色为固定资产，红色为流动资产）， 但只有一种类型的框使用以下代码绘制

欢迎提出任何建议

    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选择。第一个块工作是因为数据是新的（输入的），第二个块不工作是因为它是相同的数据（没有输入任何内容）

这里根本不需要重新绑定数据。只需保留对enter选择的引用并附加两个矩形：

变量数据集=[
{  
“固定资产”：100，
“流动资产”：150，
“股权”：50，
“长期负债”：100，
“短期负债”：150，
“收入”：400，
“营业收入”：150，
“息税前利润”：100，
“ebt”：50，
“净收入”：35
},
{  
“固定资产”：100，
“流动资产”：150，
“股权”：50，
“长期负债”：100，
“短期负债”：150，
“收入”：400，
“营业收入”：150，
“息税前利润”：100，
“ebt”：50，
“净收入”：35
}            
];
var w=400；
var h=300；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var padding_left=20；
var\u底部=30；
//保留引用以输入选择
var eS=svg.selectAll（“rect”）
.数据（数据集）
.enter（）；
//第一矩形
锿
.append（“rect”）
.attr（“填充”、“蓝色”）
.attr（“x”，函数（d，i）{返回i*100+padding_left；}）
.attr（“y”，函数（d）{返回h-padding_bottom-d[“fixed_asset”]；}）
.attr（“宽度”，20）
.attr（“高度”，函数（d）{返回d[“固定资产”]；}）；
//第二个矩形
锿
.append（“rect”）
.attr（“填充”、“红色”）
.attr（“x”，函数（d，i）{返回i*100+padding_left；}）
.attr（“y”，函数（d）{返回h-padding_bottom-d[“固定资产”]-d[“当前资产”]；}）
.attr（“宽度”，20）
.attr（“高度”，函数（d）{返回d[“当前资产”]；}）；

当您调用此选项时：

svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   ...

svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   ...

您将重新绑定数据并计算两次enter选择。第一个块工作是因为数据是新的（输入的），第二个块不工作是因为它是相同的数据（没有输入任何内容）

这里根本不需要重新绑定数据。只需保留对enter选择的引用并附加两个矩形：

变量数据集=[
{  
“固定资产”：100，
“流动资产”：150，
“股权”：50，
“长期负债”：100，
“短期负债”：150，
“收入”：400，
“营业收入”：150，
“息税前利润”：100，
“ebt”：50，
“净收入”：35
},
{  
“固定资产”：100，
“流动资产”：150，
“股权”：50，
“长期负债”：100，
“短期负债”：150，
“收入”：400，
“营业收入”：150，
“息税前利润”：100，
“ebt”：50，
“净收入”：35
}            
];
var w=400；
var h=300；
var svg=d3.选择（“主体”）
.append（“svg”）
.attr（“宽度”，w）
.attr（“高度”，h）；
var padding_left=20；
var\u底部=30；
//保留引用以输入选择
var eS=svg.selectAll（“rect”）
.数据（数据集）
.enter（）；
//第一矩形
锿
.append（“rect”）
.attr（“填充”、“蓝色”）
.attr（“x”，函数（d，i）{返回i*100+padding_left；}）
.attr（“y”，函数（d）{返回h-padding_bottom-d[“fixed_asset”]；}）
.attr（“宽度”，20）
.attr（“高度”，函数（d）{返回d[“固定资产”]；}）；
//第二个矩形
锿
.append（“rect”）
.attr（“填充”、“红色”）
.attr（“x”，函数（d，i）{返回i*100+padding_left；}）
.attr（“y”，函数（d）{返回h-padding_bottom-d[“固定资产”]-d[“当前资产”]；}）
.attr（“宽度”，20）
.attr（“高度”，函数（d）{返回d[“当前资产”]；}）；

非常感谢！代码与您的指示配合得很好，谢谢您的详细解释。非常感谢！代码与您的指示配合得很好，谢谢您的详细解释。