Question

我目前有2个图表，一个在另一个上面。与顶部和底部相关联的哪组数据是动态确定的。我还想根据正在使用的数据集确定顶部和底部图表的颜色。 I.E.一个数据集与男性相关，一个与女性相关，女性应为红色，男性为蓝色。我现在这样做的方式是这样的：

 bar2.append("rect")
    .attr("height", function(d) { return heightBottom - bottomScale(d) })
    .attr("width", barWidth - 1)
    .style("fill", function(d) {
        return dataMale.indexOf(d) !== -1 ? "blue" : "red";
    });

但是在两个数据集具有相同值的情况下，事情可能会搞砸。有一个更好的方法吗？这是代码：

var dataMale = [577661, 1552631, 447955, 55570, 10391, 3146, 24462];
var dataFemale = [221395, 1156634, 151738, 20167, 5157, 1598, 7545];

var dataTop, dataBottom;
var maleMax = d3.max(dataMale), femaleMax = d3.max(dataFemale);
var maleFemaleTotal = maleMax + femaleMax;
var maleMaxOfAll = maleMax > femaleMax;



var ratioMale = maleMax/maleFemaleTotal;
var ratioFemale = femaleMax/maleFemaleTotal;

if (d3.max(dataMale) > d3.max(dataFemale)) {
    dataTop = dataMale;
    dataBottom = dataFemale;
} else {
    dataTop = dataFemale;
    dataBottom = dataMale;
}

var width = 960,
fullHeight = 550,
wrapperHeight = fullHeight + 200,
heightTop, 
heightBottom;

if (maleMaxOfAll) {
    heightTop = fullHeight * ratioMale;
    heightBottom = fullHeight * ratioFemale;
} else {
    heightTop = fullHeight * ratioFemale;
    heightBottom = fullHeight * ratioMale;
}

var topScale = d3.scale.linear()
    .domain([0, d3.max(dataTop)])
    .range([heightTop, 0]);

var bottomScale = d3.scale.linear()
    .domain([0, d3.max(dataBottom)])
    .range([heightBottom, 0]);

var axisScale = d3.scale.ordinal()
    .domain(dataTop)
    .rangeBands([0, width]);

var axisScale2 = d3.scale.ordinal()
    .domain(dataBottom)
    .rangeBands([0, width]);
    // .range([0, 960]);

var chart = d3.select(".chart")
    .attr("width", width)
    .attr("height", wrapperHeight);

var chart1 = chart.append("g")
    .attr("class", "chart-one")
    .attr("height", heightTop)
    .attr("width", width);


var chart2 = chart.append("g")
    .attr("class", "chart-two")
    .attr("transform", function() { return "translate(0," + (heightTop + 90) + ")"; })
    .attr("height", heightBottom)
    .attr("width", width);

var barWidth = width / dataMale.length;

var bar = d3.select(".chart-one")
    .selectAll("g")
    .data(dataTop)
    .enter().append("g")
    .attr("class", "one")
    .attr("transform", function(d, i) { return "translate(" + i * barWidth + ", 0)"; });

bar.append("rect")
    .attr("y", function(d) { return topScale(d) + 50; })
    .attr("height", function(d) { return heightTop - topScale(d); })
    .attr("width", barWidth - 1)
    .style("fill", function(d) {
        return dataMale.indexOf(d) !== -1 ? "blue" : "red";
    });

var bar2 = d3.select(".chart-two")
    .selectAll("g")
    .data(dataBottom)
    .enter().append("g")
    .attr("class", "two")
    .attr("transform", function(d, i) { return "translate(" + i * barWidth + ",0)"; });

bar2.append("rect")
    .attr("height", function(d) { return heightBottom - bottomScale(d) })
    .attr("width", barWidth - 1)
    .style("fill", function(d) {
        return dataMale.indexOf(d) !== -1 ? "blue" : "red";
    });

var sharedAxis = d3.svg.axis()
    .scale(axisScale)
    .tickValues(dataTop);

var xAxis = d3.svg.axis()
    .scale(axisScale)
    .tickValues(dataTop);
    // .tickPadding([-10]);
    // .orient("top");
var xAxis2 = d3.svg.axis()
    .scale(axisScale)
    .tickValues(dataTop)
    .tickPadding([15]);

var xAxis3 = d3.svg.axis()
    .scale(axisScale)
    .tickValues(dataTop)
    .tickPadding(27);

var xBotAxis = d3.svg.axis()
    .scale(axisScale2)
    .orient("top")
    .tickValues(dataBottom);

d3.select(".chart-one").append("g").attr("class", "axis").call(xAxis);
d3.select(".chart-one").append("g").attr("class", "axis").call(xAxis2);
d3.select(".chart-one").append("g").attr("class", "axis").call(xAxis3);
d3.select(".chart").append("g").attr("transform", "translate(0," + (heightTop + 62) + ")").attr("class", "axis").call(sharedAxis);

d3.select(".chart-two").append("g").attr("transform", "translate(0, " + (heightBottom + 25) + ")").attr("class", "axis").call(xBotAxis);
d3.select(".chart-two").append("g").attr("transform", "translate(0, " + (heightBottom + 37) + ")").attr("class", "axis").call(xBotAxis);
d3.select(".chart-two").append("g").attr("transform", "translate(0, " + (heightBottom + 49) + ")").attr("class", "axis").call(xBotAxis);

Answer 1

我会将数据作为类型的一部分。假设您将其添加为新属性gender，则可以执行类似

的操作

var dataTop = male;
// more code
var bar = d3.select(".chart-one")
  .selectAll("g")
  .data(dataTop)
  .enter().append("g");
bar.append("rect")
   .style("fill", dataTop.gender == "male" ? "blue" : "red");

d3检查函数中的哪个数据集

1 个答案: