9
Vẽ một thanh công cụ nhiều trục bằng cách sử dụng nvd3. Vấn đề của tôi là các thanh đang chồng lên nhau. Trong biểu đồ trên trục y nằm ở bên trái và trục y khác ở bên phải.NVD3 Thanh kéo nhiều vạch Barchart trục trên bản vẽ
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<link href="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.3/nv.d3.css" rel="stylesheet" type="text/css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/nvd3/1.8.3/nv.d3.js"></script>
<style>
text {
font: 12px sans-serif;
}
svg {
display: block;
}
html, body, #chart1, svg {
margin: 0px;
padding: 0px;
height: 100%;
width: 100%;
}
</style>
</head>
<body class='with-3d-shadow with-transitions'>
<div id="chart1" >
<svg> </svg>
</div>
<script>
// var testdata = stream_layers(9,10+Math.random()*100,.1).map(function(data, i) {
// return {
// key: 'Stream' + i,
// values: data.map(function(a){a.y = a.y * (i <= 100 ? 100 : 1); return a})
// };
// });
var testdata=[{"key":"stream1", "values": [
{
"x": 0,
"y": 44
},
{
"x": 1,
"y": 10
},
{
"x": 2,
"y": 29
},
{
"x": 3,
"y": 88
},
{
"x": 4,
"y": 25
},
{
"x": 5,
"y": 32
},
{
"x": 6,
"y": 100
},
{
"x": 7,
"y": 52
},
{
"x": 8,
"y": 15
},
{
"x": 9,
"y": 78
},
{
"x": 10,
"y": 42
},
{
"x": 11,
"y": 108
},
{
"x": 12,
"y": 17
},
{
"x": 13,
"y": 23
},
{
"x": 14,
"y": 182
},
{
"x": 15,
"y": 9
},
{
"x": 16,
"y": 25
},
{
"x": 17,
"y": 90
},
{
"x": 18,
"y": 32
},
{
"x": 19,
"y": 138
},
{
"x": 20,
"y": 189
},
{
"x": 21,
"y": 3
},
{
"x": 22,
"y": 16
},
{
"x": 23,
"y": 66
},
{
"x": 24,
"y": 46
},
{
"x": 25,
"y": 27
},
{
"x": 26,
"y": 185
},
{
"x": 27,
"y": 13
},
{
"x": 28,
"y": 12
},
{
"x": 29,
"y": 71
},
{
"x": 30,
"y": 191
}
]},
{"key":"stream2","values":[
{
"x": 0,
"y": 1.1
},
{
"x": 1,
"y": 0.5
},
{
"x": 2,
"y": 2.1
},
{
"x": 3,
"y": 1.5
},
{
"x": 4,
"y": 1.7
},
{
"x": 5,
"y": 2.1
},
{
"x": 6,
"y": 0.75
},
{
"x": 7,
"y": 1.75
},
{
"x": 8,
"y": 1
},
{
"x": 9,
"y": 2.3
},
{
"x": 10,
"y": 2
},
{
"x": 11,
"y": 0.5
},
{
"x": 12,
"y": 1.6
},
{
"x": 13,
"y": 1.8
},
{
"x": 14,
"y": 2.35
},
{
"x": 15,
"y": 2.4
},
{
"x": 16,
"y": 1.8
},
{
"x": 17,
"y": 1
},
{
"x": 18,
"y": 1.25
},
{
"x": 19,
"y": 1.85
},
{
"x": 20,
"y": 0.65
},
{
"x": 21,
"y": 0.75
},
{
"x": 22,
"y": 1.25
},
{
"x": 23,
"y": 2.25
},
{
"x": 24,
"y": 0.5
},
{
"x": 25,
"y": 1.85
},
{
"x": 26,
"y": 1.75
},
{
"x": 27,
"y": 1.15
},
{
"x": 28,
"y": 1.9
},
{
"x": 29,
"y": 2.4
},
{
"x": 30,
"y": 1.5
}
]}];
testdata[0].type = "bar";
testdata[0].yAxis = 1;
testdata[1].type = "bar";
testdata[1].yAxis = 2;
console.log(testdata);
nv.addGraph(function() {
var chart = nv.models.multiChart()
.margin({top: 30, right: 60, bottom: 50, left: 70})
.color(d3.scale.category10().range())
.height(450)
.width(1200)
.color(d3.scale.category10().range())
.useInteractiveGuideline(true)
.interpolate('linear');
chart.xAxis.tickFormat(d3.format(',f'));
chart.yAxis1.tickFormat(d3.format(',.1f'));
chart.yAxis2.tickFormat(d3.format(',.1f'));
d3.select('#chart1 svg')
.datum(testdata)
.transition().duration(500).call(chart);
return chart;
});
</script>
</body>
</html>
Thiết lập Plunkr embeded cho điều này có thể được tìm thấy here.
Hai bộ dữ liệu để vẽ biểu đồ đa Nhưng các thanh bị trùng lặp. My Out đặt ảnh chụp màn hình là ở đây.
điều duy nhất cần làm là điều chỉnh độ rộng và vị trí của quán bar. đó là những lựa chọn bởi lớp
d3.selectAll ('.bars1Wrap .nv-groups .nv-series-0 rect')
Khi tôi chuyển trục để
testdata[1].yAxis = 1;
Nó hoạt động hoàn hảo. 
Nhưng vấn đề là sự khác biệt của dữ liệu bị mất. Tôi cần phạm vi khác nhau cho hai tập dữ liệu.
Tôi cố gắng để điều chỉnh độ rộng của các quán bar sau khi vẽ biểu đồ
như
var g3 = d3.selectAll ('.bars1Wrap .nv-groups .nv-series-0 rect')
.attr("width", function(d){ return d/2;});
Nhưng không thành công ... Bất kỳ trợ giúp đánh giá cao.
Cảm ơn trước cho một giải pháp tuyệt vời. Một vấn đề nữa tôi tìm thấy trên mã rằng nếu tôi tắt một chú giải, thanh phải đến độ rộng đầy đủ của nó. Cũng trong tình huống của tôi, tôi không thể gọi một chức năng thứ hai sau khi vẽ biểu đồ. Dù sao tôi sẽ sửa đổi mã nvd3 để làm điều này. Cảm ơn bạn đã hướng dẫn tôi hướng tới một giải pháp cuối cùng. Tôi hy vọng câu trả lời này sẽ hữu ích cho người khác. –
Vui lòng kiểm tra câu trả lời đã chỉnh sửa của tôi, mã của tôi bây giờ làm cho thanh đầy đủ chiều rộng, khi chú giải tắt. – Cyril