Javascript 在D3图形中设置条形图的最小高度
我认为这应该是相当简单的，但我是D3新手，不知道从哪里开始。我想在条形图中设置条形图的最小高度，这样即使是值为0的条形图也仍然可见 我还希望它能够由Y轴精确表示（理想情况下，在X轴和Y轴上0的起点之间添加一个缓冲区） 有没有一种简单的方法可以用动态条形图来实现这一点？Y轴上的范围可以从最大值2到最大值50000不等，但我仍然希望每个条都有某种高度 我为这段话的长度道歉：Javascript 在D3图形中设置条形图的最小高度,javascript,angularjs,d3.js,bar-chart,Javascript,Angularjs,D3.js,Bar Chart,我认为这应该是相当简单的，但我是D3新手，不知道从哪里开始。我想在条形图中设置条形图的最小高度，这样即使是值为0的条形图也仍然可见 我还希望它能够由Y轴精确表示（理想情况下，在X轴和Y轴上0的起点之间添加一个缓冲区） 有没有一种简单的方法可以用动态条形图来实现这一点？Y轴上的范围可以从最大值2到最大值50000不等，但我仍然希望每个条都有某种高度 我为这段话的长度道歉： link: function(scope, iElement, iAttrs) { var scope = scope
link: function(scope, iElement, iAttrs) {
var scope = scope;
var chart = '';
var margin = {top: 20, right: 100, bottom: 30, left: 40},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
scope.postdetails = false;
var x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
var y = d3.scale.linear()
.range([height, 0]);
var yAxis = d3.svg.axis()
.scale(y)
.orient("left")
.ticks(5, "");
var abbrevNum = function (d) {
var prefix = d3.formatPrefix(d);
return d3.round(prefix.scale(d),1) + prefix.symbol;
};
var initChart = function(){
$('.main-report-chart').remove();
x = null;
y = null;
x = d3.scale.ordinal()
.rangeRoundBands([0, width], .1);
y = d3.scale.linear()
.range([height, 0]);
yAxis = d3.svg.axis()
.tickFormat(function(d) { return abbrevNum(d); })
.scale(y)
.orient("left")
.ticks(5, "");
chart = d3.select(iElement[0]).append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.attr('class','main-report-chart')
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
};
var getMean = function(data){
var meanData = d3.mean(data,function(d){return eval('d.'+scope.metric)});
var meanArray = [];
meanArray.push(meanData);
return meanArray;
};
var watchCount = 0;
var svg='';
var newData = {}
scope.$watch('reportData', function(newVals, oldVals) {
if(newVals === oldVals && newVals !== undefined){
watchCount++;
initChart();
newData = newVals;
return scope.render(newVals);
}
if(watchCount==2){
if(newVals){
initChart();
newData = newVals;
return scope.render(newVals);
}
} else{
if(newVals){
initChart();
newData = newVals;
return scope.render(newVals);
}
}
}, true);
var tempValues = {};
scope.$watch('metric', function(newVals, oldVals) {
if(newVals){
if(scope.reportData){
// where redraw happens:
return scope.render(newData);
}
}
}, false);
scope.render = function(data){
if (scope.metric !== "") {
x.domain(data.map(function(d) { return d.id; }));
y.domain([0, d3.max(data, function(d) { return eval('d.' + scope.metric); })]);
chart.select(".x.axis").remove();
chart
.append("g")
.append("line")
.attr('x1',0)
.attr('x2',width)
.attr('y1',height )
.attr('y2',height)
.attr('stroke-width','2')
.attr("class", "domain");
chart.select(".y.axis").remove();
chart.append("g")
.attr("class", "y axis")
.call(yAxis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", -40)
.attr('class','label')
.attr("x", -height)
.attr("dy", ".71em")
.style("text-anchor", "begin")
.text(scope.label);
var bar = chart.selectAll(".bar")
.data(data, function(d) { return d.id; });
// new data:
bar.enter()
.append("g")
.attr("class", "bar-container")
.append("rect")
.attr("class", "bar")
.attr('fill','#4EC7BD')
.attr("x", function(d) { return x(d.id); })
.attr("y", function(d) { return y(eval('d.'+scope.metric)); })
.attr("height", function(d) { return height - y(eval('d.'+scope.metric)); })
.attr("width", x.rangeBand())
.on('click', function(d){
scope.showDetails(d, eval('d.'+scope.metric))
});
bar.exit().remove();
bar
.transition()
.duration(750)
.attr("y", function(d) { return y(eval('d.'+scope.metric)); })
.attr("height", function(d) { return height - y(eval('d.'+scope.metric)); });
var labeltip = chart.selectAll('.tip')
.data(data, function(d) { return d.id; });
var meanData = getMean(data);
var average = chart.selectAll(".average")
.data(meanData);
average.enter()
.append("line")
.attr("class", "average")
.attr('stroke-width','2')
.attr('stroke','#3D3F49')
.attr('x1',0)
.attr('x2',width)
.attr('y1',y(meanData))
.attr('y2',y(meanData));
average.exit().remove();
average.transition()
.duration(750)
.attr('y1',y(meanData))
.attr('y2',y(meanData));
var avgbox = chart.selectAll(".avg-box")
.data(meanData);
avgbox.enter().append("rect")
.attr('class','avg-box')
.attr('width',75)
.attr('height',20)
.attr('fill','#3D3F49')
.attr('x',width )
.attr('rx',5)
.attr('y',y(meanData)-10);
var avgtext = chart.selectAll(".avg-text")
.data(meanData);
avgtext.enter().append('text')
.text('AVG '+ abbrevNum(Math.round(meanData)))
.attr('x',width +8)
.attr('class','avg-text')
.attr('y',y(meanData+15))
.attr('fill','white');
avgbox.exit().remove();
avgbox.transition()
.duration(750)
.attr('y',y(meanData)-10);
avgtext.exit().remove();
avgtext.transition()
.duration(750)
.text('AVG '+ abbrevNum(Math.round(meanData)))
.attr('y',y(meanData)+4);
}
};
}
我将y轴最小值设置为负数，即最大y值的2%：
var maximumY = d3.max(data, function(d) {
return d.frequency;
});
y.domain([-(maximumY * .02), maximumY]);
d3嘿，在这个场景中，我添加了最小值函数，以获得表示为图表条10%的数字的最小值
// you must take the maximum number in you chart to be compared after
var max = d3.max(data, function (d) { return Math.max(d.Open, d.Closed); });
// on d3 where you draw the bar chart use the function
.attr("y", function (d) {
var barY = getMinimumValueChartBar(d.Open, max);
return y(barY);
})
.attr("height", function (d) {
var barY = getMinimumValueChartBar(d.Open, max);
return height - y(barY);
})
// this method compute if the value need to get the minimum value 10% or its zero
function getMinimumValueChartBar(val, max) {
if (val > 0 && max * 0.1 > val) {
val = max * 0.1;
}
return val;
}
希望它能帮助任何人..
精确地用Y轴表示，你会怎么做？以负数开始y轴？可能吗？或者在X轴和0Oh的开始之间添加一个缓冲区，我喜欢这样。我正在实施它，但没有看到任何变化。我是否需要修改记号？@LaurenF，唯一的更改应该是在作用域.render中设置y.domain
的位置。