我正在尝试用D3(https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.min.js)做一个SVG图,其中条形宽度是手动定义的,而且东西有一个水平滚动..
我有一个工作小提琴
https://jsfiddle.net/bikrantsharma/zw264tfc/12/
这是我的比例定义
var barWidth = 30,
paddingFactor = 2.2,
responsiveDIVHeight = 300,
responsiveDIVWidth = tempData.length * barWidth * paddingFactor;
var x = d3.scale.ordinal().rangeRoundBands([0, responsiveDIVWidth], 0.5)
.domain(tempData.map(function(d) {
return d.Type
})),
y = d3.scale.linear().rangeRound([responsiveDIVHeight, 0])
.domain([0, d3.max(tempData, function(d) {
return (d.Count + 10);
})]),
我需要帮助解决两个问题:
条形图向相反方向翻转。如何让div翻转或者条形变换?
条形高度略低于实际值。因此,例如,如果伯爵是' 5'酒吧高度回归4.8或者其他什么。有什么问题?
答案 0 :(得分:5)
你的酒吧不翻转。这里发生的事情非常简单:你有两个SVG,一个在顶部,一个在底部,你在底部SVG绘制矩形。矩形如何神奇地出现在 top SVG中?这是不可能的。
而不是那样,并排绘制SVG 。左边的一个,垂直轴,float: left
的样式为<div>
,右边的可滚动,overflow-x: scroll
的样式为<div>
它在。
这是一个演示,可以对代码进行尽可能少的更改:
var tempData = [];
for (var i = 1; i < 30; i++) {
var obj = {
"Id": 1,
"Type": 'A' + i,
"Count": 5
};
tempData.push(obj);
}
var barWidth = 30,
paddingFactor = 2.2,
padding = 20,
responsiveDIVHeight = 300,
responsiveDIVWidth = tempData.length * barWidth * paddingFactor;
var x = d3.scale.ordinal().rangeRoundBands([0, responsiveDIVWidth], 0.5)
.domain(tempData.map(function(d) {
return d.Type
})),
y = d3.scale.linear().rangeRound([responsiveDIVHeight - padding, padding])
.domain([0, d3.max(tempData, function(d) {
return (d.Count + 10);
})]),
xAxis = d3.svg.axis().scale(x).orient('bottom'),
yAxis = d3.svg.axis().scale(y).orient('left');
var svgY = d3.select('#verticalSVG')
.append('svg')
.attr('height', responsiveDIVHeight)
.attr("width", 50);
svgY.append('g')
.attr('class', 'y axis')
.call(yAxis)
.attr('dx', '-0.3em')
.attr('transform', "translate(50, 0)");;
var svgX = d3.select('#horizontalSVG')
.append('svg')
.attr('width', responsiveDIVWidth)
.attr('height', responsiveDIVHeight);
svgX.append('g')
.attr('class', 'x axis')
.attr('transform', "translate(0," + (responsiveDIVHeight - padding) + ")")
.call(xAxis)
.selectAll('text')
.attr('dx', '-0.8em')
.attr('dy', '-.15em')
.attr('transform', function(d) {
return "rotate(-60)"
});
var startPoint = 0;
var bar = svgX.selectAll('.bar')
.data(tempData)
.enter()
.append('rect')
.attr('y', function(d) {
return y(d.Count)
})
.attr('x', function(d) {
return x(d.Type)
})
.attr('width', barWidth)
.attr('height', function(d) {
return responsiveDIVHeight - y(d.Count) - padding
})
.legend-main-div {
padding: 2%;
max-height: 150px;
overflow-y: scroll;
border: 1px solid blue;
}
.axis line,
.axis path {
fill: none;
stroke: black;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<div class="row">
<div class="col-md-12">
<div id="verticalSVG" style="float:left">
</div>
<div id="horizontalSVG" style="overflow-x:scroll">
</div>
</div>
</div>