Question

我正在开发一个D3图表，类型笔划正常工作

代码是

    var margin = {
    top: 20,
    right: 20,
    bottom: 30,
    left: 40
},
width = 960 - margin.left - margin.right,
    height = 500 - margin.top - margin.bottom;

var x0 = d3.scale.ordinal()
    .rangeRoundBands([0, width], .1);

var x1 = d3.scale.ordinal();

var y0 = d3.scale.linear()
    .range([height, 0]);

var y1 = d3.scale.linear()
    .range([height, 0]);

var color = d3.scale.ordinal()
    .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);

var xAxis = d3.svg.axis()
    .scale(x0)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(y0)
    .orient("left")
    .tickFormat(d3.format(".2s"));

var svg = d3.select("body").append("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

JSONdata = [{
    "State": "Iowa",
        "Under 5 Years": 202123,
        "5 to 14 Years": 401550,
        "15 to 19 Years": 216837,
        "20 to 24 Years": 213350,
        "25 to 44 Years": 747131,
        "45 to 64 Years": 812476,
        "65 Years and Over": 452888,
        "moe": 20000
}, {
    "State": "Minnesota",
        "Under 5 Years": 355504,
        "5 to 14 Years": 707878,
        "15 to 19 Years": 367829,
        "20 to 24 Years": 355651,
        "25 to 44 Years": 1396680,
        "45 to 64 Years": 1437262,
        "65 Years and Over": 683121,
        "moe": 12000
}, {
    "State": "Wisconsin",
        "Under 5 Years": 358443,
        "5 to 14 Years": 744544,
        "15 to 19 Years": 399209,
        "20 to 24 Years": 386552,
        "25 to 44 Years": 1447360,
        "45 to 64 Years": 1573564,
        "65 Years and Over": 777314,
        "moe": 10000
}, {
    "State": "Illinois",
        "Under 5 Years": 835577,
        "5 to 14 Years": 1738853,
        "15 to 19 Years": 922092,
        "20 to 24 Years": 878964,
        "25 to 44 Years": 3501847,
        "45 to 64 Years": 3344086,
        "65 Years and Over": 1609213,
        "moe": 15000
}, {
    "State": "Missouri",
        "Under 5 Years": 390237,
        "5 to 14 Years": 706388,
        "15 to 19 Years": 423786,
        "20 to 24 Years": 413289,
        "25 to 44 Years": 1524083,
        "45 to 64 Years": 1611850,
        "65 Years and Over": 838294,
        "moe": 22000
}, {
    "State": "Nebraska",
        "Under 5 Years": 131908,
        "5 to 14 Years": 251634,
        "15 to 19 Years": 128930,
        "20 to 24 Years": 129276,
        "25 to 44 Years": 466014,
        "45 to 64 Years": 471902,
        "65 Years and Over": 246677,
        "moe": 50000
}, {
    "State": "South Dakota",
        "Under 5 Years": 59621,
        "5 to 14 Years": 109491,
        "15 to 19 Years": 57628,
        "20 to 24 Years": 57596,
        "25 to 44 Years": 198541,
        "45 to 64 Years": 214722,
        "65 Years and Over": 116581,
        "moe": 10000
}]

//d3.json(JSONdata, function(error, data) {
data = JSONdata;
var ageNames = d3.keys(data[0]).filter(function (key) {
    return key !== "State";
});

data.forEach(function (d) {
    d.moe = +d.moe
    d.ages = ageNames.map(function (name) {
        return {
            name: name,
            value: +d[name],
            moe: d.moe 
            //add the margin of error to each individual
            //data object
        };
    });
});

x0.domain(data.map(function (d) {
    return d.State;
}));
x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
y0.domain([0, d3.max(data, function (d) {
    return d3.max(d.ages, function (d) {
        return d.value;
    });
})]);
y1.domain([0, d3.max(data, function (d) {
    return d3.max(d.ages, function (d) {
        return d.value;
    });
})]);
svg.append("g")
    .attr("class", "x axis")
    .attr("transform", "translate(0," + height + ")")
    .call(xAxis);

svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
    .append("text")
    .attr("transform", "rotate(-90)")
    .attr("y", 6)
    .attr("dy", ".71em")
    .style("text-anchor", "end")
    .text("Population");

var state = svg.selectAll(".state")
    .data(data)
    .enter().append("g")
    .attr("class", "g")
    .attr("transform", function (d) {
    return "translate(" + x0(d.State) + ",0)";
});

state.selectAll("rect")
    .data(function (d) {
    return d.ages;
})
    .enter().append("rect")
    .attr("width", x1.rangeBand())
    .attr("x", function (d) {
        return x1(d.name);
    })
    .attr("y", function (d) {
        return y0(d.value);
    })
    .attr("height", function (d) {
        return height - y0(d.value);
    })
    .style("fill", function (d) {
        return color(d.name);
    });

var errorBarArea = d3.svg.area()
    .x(function (d) {
        return x1(d.name) +x1.rangeBand()/2;
    })
    .y0(function (d) {
        return y0(d.value - +d.moe);
    })
    .y1(function (d) {
        return y0(d.value + +d.moe);
    })
// .interpolate("linear");


var errorBars = state.selectAll("path.errorBar")
    .data(function (d) {
        return d.ages; //one error line for each data bar
    });

errorBars.enter().append("path").attr("class", "errorBar");

errorBars.attr("d", function (d) {
        return errorBarArea([d]);
    //turn the data into a one-element array 
    //and pass it to the area function
    })
    .attr("stroke", "red")
    .attr("stroke-width", 1.5);

/*
  var legend = svg.selectAll(".legend")
      .data(ageNames.slice().reverse())
    .enter().append("g")
      .attr("class", "legend")
      .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });

  legend.append("rect")
      .attr("x", width - 18)
      .attr("width", 18)
      .attr("height", 18)
      .style("fill", color);

  legend.append("text")
      .attr("x", width - 24)
      .attr("y", 9)
      .attr("dy", ".35em")
      .style("text-anchor", "end")
      .text(function(d) { return d; });
*/

//});

这里是小提琴

fiddle

现在我想要this之类的错误栏，即我塑造的首都

我试图将笔画改为条形，但不能正常工作。

任何建议，感谢

Answer 1

此函数errorBarAreaDOWN将成为I

的下半部分

var errorBarAreaDOWN = d3.svg.area()
    .x(function (d) {
        return x1(d.name) +x1.rangeBand()/2 + 5;
    })
    .x0(function (d) {
        return x1(d.name) +x1.rangeBand()/2 - 5;
    })
    .y1(function (d) {
        return y0(d.value - +d.moe);
    })
    .y0(function (d) {
        return y0(d.value - +d.moe);
    })

此函数errorBarAreaUP将使UPer成为I的一半

var errorBarAreaUP = d3.svg.area()
    .x(function (d) {
        return x1(d.name) +x1.rangeBand()/2 + 5;
    })
    .x0(function (d) {
        return x1(d.name) +x1.rangeBand()/2 - 5;
    })
    .y1(function (d) {
        return y0(d.value + +d.moe);
    })
    .y0(function (d) {
        return y0(d.value + +d.moe);
    })

然后制作上下路径：

errorBars.enter().append("path").attr("class", "errorBar");
errorBars.attr("d", function (d) {
        return errorBarAreaDOWN([d]);//call the function to make the Down path
    //turn the data into a one-element array 
    //and pass it to the area function
    })
    .attr("stroke", "red")
    .attr("stroke-width", 1.5);

errorBars.enter().append("path").attr("class", "errorBar");
errorBars.attr("d", function (d) {
        return errorBarAreaUP([d]);//call the function to make the UP path
    //turn the data into a one-element array 
    //and pass it to the area function
    })
    .attr("stroke", "red")
    .attr("stroke-width", 1.5);

工作代码here

希望这有帮助！

除笔画类型之外的D3图表误差条

1 个答案: