我正在使用nvd3线加条形图,我正在尝试更改折线图中圆圈的大小。 (折线图上每个圆的半径不同)
为了使折线图上的点可见,我使用了以下CSS代码 -
#test-plot .nv-linePlusBar .nv-point
{
fill: #ff5f00;
fill-opacity: 0.6;
}
我在绘制图表后调用addRadius
方法。
function addRadius() {
for (var i = 0; i < plotdata[0].values.length ; i++) {
var rad = parseFloat(plotdata[0].values[i].r);
$('#test-plot .nv-point-' + i).attr('r', rad);
}
}
setTimeout(addRadius, 500);
此代码适用于旧版本的nvd3,但不适用于1.8.1或更高版本。
我看到了一些解决方案here,但它们不适用于最新版本的nvd3。
答案 0 :(得分:0)
使用以下CSS进行Triy:
.nvd3 .nv-groups .nv-point {
stroke-opacity: 0.5 !important;
}
并更改addRadius()函数中的选择器:
function addRadius() {
var dt = data[1].values;
console.log(dt, dt.length)
for (var i = 0; i < dt.length; i++) {
// just an example
var w = 20 * dt[i][1] / 600;
$('.nvd3 .nv-groups .nv-point-' + i).css('stroke-width', w);
}
}
检查此代码段:
var data = [{
"key": "Quantity",
"bar": true,
"values": [
[1301544000000, 2000],
[1304136000000, 2500],
[1306814400000, 1800],
[1309406400000, 2100],
[1312084800000, 2100],
[1314763200000, 2800]
]
}, {
"key": "Price",
"values": [
[1301544000000, 348.5075, 20],
[1304136000000, 350.13, 30],
[1306814400000, 347.83, 10],
[1309406400000, 335.67, 5],
[1312084800000, 390.48, 40],
[1314763200000, 384.83, 10]
]
}]
$(document).ready(function() {
nv.addGraph(function() {
var chart = nv.models.linePlusBarChart()
.focusEnable(false)
.margin({
top: 30,
right: 60,
bottom: 50,
left: 70
})
.x(function(d, i) {
return i
})
.y(function(d) {
return d[1]
})
.color(d3.scale.category10().range());
chart.xAxis
.showMaxMin(false)
.tickFormat(function(d) {
var dx = data[0].values[d] && data[0].values[d][0] || 0;
return d3.time.format('%x')(new Date(dx))
});
chart.y1Axis
.tickFormat(d3.format(',f'));
chart.y2Axis
.tickFormat(function(d) {
return '$' + d3.format(',f')(d)
});
chart.bars.forceY([0]);
d3.select('#chart svg')
.datum(data)
.transition().duration(500)
.call(chart);
nv.utils.windowResize(chart.update);
return chart;
});
});
function addRadius() {
var dt = data[1].values;
console.log(dt, dt.length)
for (var i = 0; i < dt.length; i++) {
//var rad = parseFloat(data[1].values[i].r);
//$('.nvd3 .nv-groups .nv-point-' + i).attr('r', rad);
var w = dt[i][2];
console.log("w" + i, w);
$('.nvd3 .nv-groups .nv-point-' + i).css('stroke-width', w);
}
}
setTimeout(addRadius, 500);
#chart svg {
height: 400px;
}
.nvd3 .nv-groups .nv-point {
stroke: red;
fill: red;
stroke-opacity: 0.5 !important;
/*stroke-width: 20px;*/
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/novus/nvd3/master/build/nv.d3.js"></script>
<link href="https://rawgit.com/novus/nvd3/master/build/nv.d3.css" rel="stylesheet"/>
<div id="chart">
<svg></svg>
</div>