javascript - 使用D3制作双水平折线图

Question

我刚刚开始使用 D3，需要使用 csv 文件制作水平条形图。该数据旨在比较美国不同州男性和女性的薪酬。每个州都需要有两个触摸酒吧(一个用于男性工资，一个用于女性工资)。 CSV 文件的标题行为 State,Women,Men，下面的每一行都有每个州的名称和相应的数据。

这是我到目前为止所做的事情。

var margin = { top: 20, right: 10, bottom: 100, left: 40 },
    width = 700 - margin.right - margin.left,
    height = 500 - margin.top - margin.bottom;

var svg = d3.select('body')
    .append('svg')
    .attr ({ 
    "width" : width + margin.right + margin.left,
    "height" : height + margin.top + margin.bottom
})

    .append('g')
        .attr("transform", "translate(" + margin.left + ',' + margin.right + ')');

var xScale = d3.scale.ordinal()
     .rangeRoundBands([height,0], 0.2, 0.2);

var yScale = d3.scale.linear()
    .range([0, width]);

var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("left");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("bottom");

d3.csv("state-women-men.csv", function(error, data) {
    if(error) console.log("Error, data not loaded");

    data.forEach(function(d) {
        d.Women = +d.Women;
        d.Men = +d.Men;
        d.State = d.State;
        console.log(d.Men);
        console.log(d.Women);
    });

    xScale.domain(data.map(function(d) { return d.State;}) );
    yScale.domain([0, d3.max(data,function (d) { return d.Women; }) ] );

    svg.selectAll('rect')
        .data(data)
        .enter()
        .append('rect')
        .attr ({
            "x": function(d) { return xScale(d.State); },
            "y": function(d) { return yScale(d.Women); },
            "height": xScale.rangeBand(),
            "width": function(d) { return (width - xScale(d.State)); }
        });

    svg.append("g")
        .attr("class", "x axis")
        //.attr("transform", "translate(0," + height +")")
        .call(xAxis);

    svg.append("g")
        .attr("class", "y axis")
        .attr("transform", "translate(0," + height +")")
        .call(yAxis);
});

首先，我只使用女性数据，稍后我会弄清楚如何将男性数据放入其中。现在更大的问题是格式；正如您在图片中所看到的，这些条形图靠得很近，并且距离屏幕底部太远，并且条形图从屏幕右侧而不是左侧开始。谁能指出我的代码中导致图形看起来像这样的原因，并为我提供有关添加第二个条形图以及条形图颜色的建议？谢谢。

图表图片:

Answer 1

看起来主要问题是您的 rect 属性混淆了。尝试使用以下内容，您将获得更好的结果:

svg.selectAll('rect')
    .data(data)
    .enter()
    .append('rect')
    .attr ({
        "x": 0,
        "y": function(d) { return xScale(d.State); },
        "height": xScale.rangeBand(),
        "width": function(d) { return (yScale(d.Women)); }
});

推理:

• x 值应固定为零，以便与轴对齐
• y 值应基于您的 xScale 和 State 属性。有点令人困惑，因为你的音阶名称被翻转了
• width 应该只是使用 Women 属性的 x 轴 (yScale)。