我想在我的nvd3折线图中包含x轴断点(SQUIGGLE符号)。与下面给出的链接中的此图像类似。
是否可以使用nvd3包含此符号?
提前致谢。
我在下面添加了我的nvd3折线图代码。
nv.addGraph(function() {
chart = nv.models.lineChart()
.options({
transitionDuration: 300,
useInteractiveGuideline: false
})
;
chart.showLegend(true);
var xAxis = d3.svg.axis()
var days = ["0", "sample txt", "sample txt", "sample txt", "sample txt", "sample txt", ""];
chart.xAxis.tickValues([0, 1, 2, 3, 4, 5, 6])
.tickFormat(function(d){
return days[d]
});
var days_v = [0, 1, 2, 3, 4, 5, 6 , 7, 8, 9, 10];
chart.yAxis.tickValues([0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10])
.tickFormat(function(d){
return days_v[d]
});
chart.xDomain([0,6]);
chart.yDomain([0,10]);
chart.xAxis
.axisLabel("Sample xlabel text")
.tickPadding(10)
.axisLabelDistance(15)
.scale([0,1,2])
;
chart.yAxis
.axisLabel('Sample ylabel text')
.tickPadding(10)
.axisLabelDistance(-6)
;
d3.select('#chart1').append('svg')
.datum(data)
.call(chart);
d3.select('#chart1 svg')
.append("text")
.attr("x","50%")
.attr("y", -5)
.attr("text-anchor", "middle")
.attr("class", "chart_title")
.text("Sample Chart");
var svgElem = d3.select('#chart1 svg');
var tickY2 = chart.yAxis.scale().range()[1];
var lineElems = svgElem
.select('.nv-x.nv-axis.nvd3-svg')
.select('.nvd3.nv-wrap.nv-axis')
.select('g')
.selectAll('.tick')
.data(chart.xScale().ticks())
.append('line')
.attr('class', 'x-axis-tick-mark')
.attr('x2', 0)
.attr('y1', tickY2 + 6)
.attr('y2', tickY2)
.attr('stroke-width', 1)
;
var tickx2 = chart.xAxis.scale().range()[1];
var lineEle = svgElem
.select('.nv-y.nv-axis.nvd3-svg')
.select('.nvd3.nv-wrap.nv-axis')
.select('g')
.selectAll('.tick')
.data(chart.yScale().ticks())
.append('line')
.attr('class', 'y-axis-tick-mark')
.attr('y1', 0)
.attr('x1', tickY2 - 5)
.attr('x2', tickY2)
.attr('stroke-width', 1)
;
nv.utils.windowResize(chart.update);
return chart;
});