javascript - 无法处理 d3 条形图上的负值

Question

我正在尝试在 d3 中创建条形图。我有点能做到。

这是我的代码:

columns=[];
wid=300;
div="chart1";
hgt=200;
columns.push("Carrier");
measureArray=[];
measureArray.push("Weight");
data=JSON.parse('[{"Carrier":"AAA","Weight":"370521.1140920751"},{"Carrier":"BBB","Weight":"283158.83174940513"},{"Carrier":"CCC","Weight":"268412.846944693"},{"Carrier":"DDD","Weight":"249936.88014410512"},{"Carrier":"EEE","Weight":"235395.1033872669"},{"Carrier":"FFF","Weight":"194363.0"},{"Carrier":"GGG","Weight":"181281.13981602874"},{"Carrier":"HHH","Weight":"158635.0"},{"Carrier":"III","Weight":"148570.47194245495"},{"Carrier":"JJJ","Weight":"123718.89288302396"},{"Carrier":"KKK","Weight":"117170.0"},{"Carrier":"LLL","Weight":"102159.0"}]');
var customTicks = 5;
var color = d3.scale.category10();
var divWid=wid-30;
var chartData=JSON.parse('{"chart1":{"viewBys":["Carrier"],"viewIds":["81392"],"dimensions":["81392"],"aggregation":["COUNTDISTINCT"],"meassures":["Weight"],"meassureIds":["111016"],"filters":{"81392":["KUEHNE & NAGEL (KHNN)"]},"size":"S","records":"12","chartType":"Vertical-Bar","viewByLevel":"single","others":"N","othersL":"N","globalEnable":"Y","row":"1","col":"1","size_x":"19","size_y":"9","id":"divchart1"}}');

var divHgt=hgt;
var dashletid=div;
var colIds= [];
colIds = chartData[div]["viewIds"];

if(typeof chartData[div]["lbPosition"]=='undefined' || chartData[div]["lbPosition"]==='top'){
    hgt -=25;
}
var chartMap = {};
var measure1 = measureArray[0];
var minVal = 0;
if(typeof chartData[div]["yaxisrange"]!="undefined" && chartData[div]["yaxisrange"]!="" && chartData[div]["yaxisrange"]["axisTicks"]!="undefined" && chartData[div]["yaxisrange"]["axisTicks"]!="" && (typeof parent.$("#drills").val()=="undefined" || parent.$("#drills").val()=="" )) {
    customTicks = chartData[div]["yaxisrange"]["axisTicks"];
}
var autoRounding1;

autoRounding1 = "1d";

var fun="";
hasTouch = /android|iphone|ipad/i.test(navigator.userAgent.toLowerCase());
if(hasTouch){
    fun="";
}else{
    fun = "drillWithinchart(this.id,\""+div+"\")";
}

function drillFunct(id1){
    drillWithinchart(id1,div);
}

var margin = { top: 10, right: 12,  bottom: 30, left: 70 };
if(typeof chartData[div]["displayY"]!="undefined" && chartData[div]["displayY"]!="" && chartData[div]["displayY"]!="Yes"){
    margin = { top: 10, right: 12,  bottom: 30, left: 20 }; 
}else{
    margin = { top: 10, right: 12,  bottom: 30, left: 70 }; 
}

var width = divWid;
var height = 0;
if(typeof chartData[div]["displayX"]!="undefined" && chartData[div]["displayX"]!="" && chartData[div]["displayX"]!="Yes"){
    height = divHgt*.78 ; //- margin.top - margin.bottom
}else{
    height = divHgt *.73; //- margin.top - margin.bottom

}  //end condition by mayank sh. for hidden white space


var barPadding = 4;
var range="";
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], 0.1, range);
var y = d3.scale.linear()
.range([height, 0]);
var measArr = [];
if(typeof chartData[div]["displayYLine"]!="undefined" && chartData[div]["displayYLine"]!="" && chartData[div]["displayYLine"]!="Yes"){
    make_x_axis = function() {
        return d3.svg.gridaxis()
        .scale(x)
        .orient("bottom")
        .ticks(5)
    }


    make_y_axis = function() {
        return d3.svg.gridaxis()
        .scale(y)
        .orient("left")
        .ticks(customTicks)
    }
}else{
    make_x_axis = function() {
        return d3.svg.axis()
        .scale(x)
        .orient("bottom")
        .ticks(5)
    }

    make_y_axis = function() {
        return d3.svg.axis()
        .scale(y)
        .orient("left")
        .ticks(customTicks)
    }
}
if(typeof chartData[div]["displayXLine"]!="undefined" && chartData[div]["displayXLine"]!="" && chartData[div]["displayXLine"]!="Yes"){
    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
}else{
    var xAxis = d3.svg.axis()
    .scale(x)
    .orient("bottom");
}
var    yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.tickFormat(function(d) {
    return d;
});

yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(customTicks)
.tickFormat(function(d, i) {
    return d;
});
var yAxis1 = d3.svg.axis()
.scale(y)
.tickFormat(function(d, i) {
    measArr.push(d);
    return "";
});
var offset=0;        
if(typeof chartData[div]["lbPosition"]=='undefined' || chartData[div]["lbPosition"]==='top'){
    offset=25;
}        
var svg = d3.select("#" + dashletid)
.append("svg")
.attr("id", "svg_" + dashletid)
.attr("viewBox", "0 0 "+(width + margin.left + margin.right)+" "+(height + margin.top + margin.bottom+65)+" ")
.append("g")
.attr("transform", "translate(" + margin.left + "," + 10 + ")");

var gradient = svg.append("svg:defs").selectAll("linearGradient").data(data).enter()
.append("svg:linearGradient")
.attr("id", function(d) {
})
.attr("x1", "0%")
.attr("y1", "30%")
.attr("x2", "50%")
.attr("y2", "30%")
.attr("spreadMethod", "pad")
.attr("gradientTransform", "rotate(0)");
colorMap = {};
gradient.append("svg:stop")
.attr("offset", "0%")
.attr("stop-color", function(d, i) {
    var colorShad;
    return colorShad="steelblue";
})
.attr("stop-opacity", 1);
gradient.append("svg:stop")
.attr("offset", "9%")
.attr("stop-color", "rgb(240,240,240)")
.attr("stop-opacity", 1);
gradient.append("svg:stop")
.attr("offset", "80%")
.attr("stop-color", function(d, i) {
    var colorShad;
})
.attr("stop-opacity", 1);
x.domain(data.map(function(d) {
    return d[columns[0]];
}));


var max = 0;
if(typeof chartData[div]["yaxisrange"]!="undefined"&& chartData[div]["yaxisrange"]!="") {

    if(chartData[div]["yaxisrange"]["YaxisRangeType"]!="MinMax" && chartData[div]["yaxisrange"]["YaxisRangeType"]!="Default" && typeof chartData[div]["yaxisrange"]["axisMax"]!="undefined" && chartData[div]["yaxisrange"]["axisMax"]!="" && (typeof parent.$("#drills").val()=="undefined" || parent.$("#drills").val()=="" ) ) {
        max = parseFloat(chartData[div]["yaxisrange"]["axisMax"]);
    }else{
        max = maximumValue(data, measure1);
    }}else{
    max = maximumValue(data, measure1);
}
if(typeof chartData[div]["yaxisrange"]!="undefined" && chartData[div]["yaxisrange"]!="") {
    if(chartData[div]["yaxisrange"]["YaxisRangeType"]!="MinMax" && chartData[div]["yaxisrange"]["YaxisRangeType"]!="Default" && typeof chartData[div]["yaxisrange"]["axisMin"]!="undefined" && chartData[div]["yaxisrange"]["axisMin"]!="" && (typeof parent.$("#drills").val()=="undefined" || parent.$("#drills").val()=="" ) ) {
        minVal = parseFloat(chartData[div]["yaxisrange"]["axisMin"]);
    }else if(chartData[div]["yaxisrange"]["YaxisRangeType"]=="Default" ){
        minVal = 0;
    }else{
        if (data.length > 1) {
            minVal = minimumValue(data, measure1) * .8;
        }}
}else{
    if (data.length > 1) {
        minVal = minimumValue(data, measure1) * .8;
    }else{
        minVal = 0;
    }
}

y.domain([parseFloat(minVal), parseFloat(max)]);
if(typeof chartData[div]["GridLines"]!="undefined" && chartData[div]["GridLines"]!="" && chartData[div]["GridLines"]!="Yes"){}else{
    svg.append("g")
    .attr("class", "grid11")
    .call(make_y_axis()
    .tickSize(-width, 0, 0)
    .tickFormat("")
)
}
if(typeof chartData[div]["displayX"]!="undefined" && chartData[div]["displayX"]!="" && chartData[div]["displayX"]!="Yes"){}else{
    svg.append("g")
    .attr("class", ".x axis")
    .attr("transform", "translate(0," + (height*1) + ")")
    .call(xAxis)
    .selectAll('text')
    .attr('x',function(d,i){  // add by mayank sharma
       return 0;
    })
    .attr('y',function(d,i){
       return 5;
    })
    .text(function(d,i) {
        return d;
    })
    .attr('transform',function(d,i){
        if(typeof chartData[div]["legendPrintType"]!="undefined" && chartData[div]["legendPrintType"]!="" && chartData[div]["legendPrintType"]=== "Alternate") {
            return  "";
        }else if (chartData[div]["legendPrintType"] === "Horizontal") {
            return  "";
        }else if (chartData[div]["legendPrintType"] === "Vertical") {
            return "rotate(-85)";
        }else {
            return "rotate(-35)";
        }
    })
    .style('text-anchor',function(d,i){
        if(typeof chartData[div]["legendPrintType"]!="undefined" && chartData[div]["legendPrintType"]!="" && chartData[div]["legendPrintType"]=== "Alternate") {
            return  "middle";
        }else if(chartData[div]["legendPrintType"] === "Horizontal"){
            return  "middle";
        }else if (chartData[div]["legendPrintType"] === "Vertical") {
            return "end";
        }else {
            return "end";
        }
    })
    .append("svg:title")
    .text(function(d) {
        return d;
    })
    .style("font-size","11px");
}
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").style("font-size","11px");
barRadius=0;
var bars=svg.selectAll(".bar")
.data(data)
.enter().append("g")
.attr("class", "bar")
.append("rect");
bars.attr("rx", barRadius)
.attr("fill", function(d,i) {
    return "blue";
})
.attr("color_value", function(d,i){
    return "blue";
})
.attr("index_value", function(d, i) {
    return "index-" + d[columns[0]].replace(/[^a-zA-Z0-9]/g, '', 'gi');
})
.attr("class", function(d, i) {
    return "bars-Bubble-index-" + d[columns[0]].replace(/[^a-zA-Z0-9]/g, '', 'gi')+div;
})
.attr("id", function(d) {
    return d[columns[0]] + ":" + d[measure1];
})
.attr("onclick", fun)
.attr("x", function(d) {
    return x(d[columns[0]]);
})
.attr("width",0)
.transition()
.duration(2000)//1 second
.attr("width", x.rangeBand())
.attr("y", function(d) {
    return y(d[measure1]);
})
.attr("height", function(d) {
    return height - y(d[measure1]);
});

var sum = d3.sum(data, function(d) {
    return d[measureArray[0]];
});


function maximumValue(data, measure) {
    var max;
    for (var j = 0; j < data.length; j++) {

        if (j === 0) {
            max = data[j][measure];
        } else {
            if (max < parseFloat(data[j][measure])) {
                max = data[j][measure];
            }
        }
    }
    return max;
}
function minimumValue(data, measure) {
    var min;
    try {
        for (var k = 0; k < data.length; k++) {
            if (k === 0) {
                min = data[k][measure];
            } else {
                if (min > parseFloat(data[k][measure])) {
                    min = data[k][measure];
                }
            }
        }
    } catch (e) {
    }
    return min;
}

运行示例是here

在这种情况下，我显示的所有值恰好都是正的。但并非一直如此。有时也会出现负值。

但是当出现负值时，我的图表似乎无法处理它们。根据我过去几天所做的研究，我知道我需要对图表的缩放比例进行一些调整。引用:handle negative values

但由于我是 d3 的新手，所以我做不到。

Same Example具有负值。您会清楚地看到负数未正确显示。

对于负值，我的图表应该如下所示

意味着在负值的情况下，条形图应该从 x 轴开始(像往常一样)并根据值向下延伸到底部。

谁能帮我解决这个问题。我会非常感激 :)一些解释将不胜感激。

Answer 1

为此你可以像这样制作中间线:

   svg.append("line")
    .attr("x1",-6)
    .attr("y1",y(0))//so that the line passes through the y 0
    .attr("x2",width)
    .attr("y2",y(0))//so that the line passes through the y 0
    .style("stroke", "black");

对于负线，柱的 y 将为 y(0)

像这样

    .attr("y", function(d) {
        if(y(0) > y(d[measure1]))
            return y(d[measure1]);
        else
          return y(0);
    })

对于高度，您采用 Math.abs(y(0) - y(d[measure1])) 的绝对值:

   .attr("height", function(d) {
        return Math.abs(y(0) - y(d[measure1]));
    });

为了使 x 轴指向底部，给它高度的 y 轴平移。

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

工作代码 here