1. 首頁
  2. 問答
  3. 無法處理d3條形圖上的負值

無法處理d3條形圖上的負值

2016-01-21 88 views
1

我正嘗試在d3中創建條形圖。我有點能夠做到這一點。無法處理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負值。 正如你會清楚地看到負面不能正確顯示。

負值我的圖表應有些像如下 enter image description here

手段在負值的情況下，條應該從x軸（如常）開始，並且根據值向下伸展至底部。

任何人都可以幫我解決這個問題。我會非常感謝:) 一些解釋將非常感激。

來源

2016-01-21 ValarMorghulis

+0

應該怎麼負值看它會運行在x軸蜱 – Cyril

+0

@Cyril請重讀後......剛編輯 – ValarMorghulis

回答

2

對於您可以使中間路線是這樣的：

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

來源

2016-01-21 08:56:00 Cyril

+0

非常感謝!!!!!!!! !!!!像魅力一樣工作..... – ValarMorghulis

相關問題

 相關問題