如何填充一半的矩形与颜色在d3.js

Question

我想要一个宽度为250的矩形，我想用基于输入值的颜色填充矩形。我试着在相同的位置创建一个灰色矩形和另一个天蓝色矩形来实现这一点，但它只更新了矩形。不能在之前的矩形上再创建一个矩形。该怎么办?我的Js小提琴是http://jsfiddle.net/sSqmV/我想创建一个第二个矩形的天蓝色在白色的前一个实现我的任务。

  var chart = d3.select("div.dev1").append("svg")
    .attr("width", 292)
    .attr("height", 300);
        var dataset = [0, 1, 2];
        var dataset2 = [0, 1, 2,3];
       var rects1 = chart.selectAll("rect")
        .data(dataset)
        .enter()
        .append("rect")
        .attr("x", 10)
        .attr("y", function (d, i) { return (i + 1) * 60; })
        .attr("height", 6)
        .attr("width", 250)
        .attr("fill", "white");

        var rects = chart.selectAll("rect")
        .data(dataset2)
        .enter()
        .append("rect")
        .attr("x", 10)
        .attr("y", function (d, i) { return (i + 1) * 60; })
        .attr("height", 6)
        .attr("width", 250)
        .attr("fill", "skyblue");
        var texts = chart.selectAll("text").data(dataset2).enter().append("text")
            .text("18% of the questions were ANSWERED")
        .attr("x", 10)
        .attr("y", function (d, i) { return 90+(i*60); });

Answer 1

你可以这样做:

 var chart = d3.select("div.dev1").append("svg")
     .attr("width", 292)
     .attr("height", 300);
 var dataset = [0, 1, 2];
 var dataset2 = [0, 1, 2, 3];


 var rects = chart.selectAll(".rect1")
     .data(dataset2)
     .enter()
     .append("rect")
     .attr('class', 'rect1')
     .attr("x", 10)
     .attr("y", function (d, i) {
     return (i + 1) * 60;
 })
     .attr("height", 6)
     .attr("width", 250)
     .attr("fill", "skyblue");
 var rects1 = chart.selectAll(".rect")
     .data(dataset)
     .enter()
     .append("rect")
     .attr('class', 'rect')
     .attr("x", 10)
     .attr("y", function (d, i) {
     return (i + 1) * 60;
 })
     .attr("height", 6)
     .attr("width", 125)
     .attr("fill", "white");


 var texts = chart.selectAll("text").data(dataset2).enter().append("text")
     .text("18% of the questions were ANSWERED")
     .attr("x", 10)
     .attr("y", function (d, i) {
     return 90 + (i * 60);
 });

这里是jsfiddle: http://jsfiddle.net/cuckovic/sSqmV/2/