带有x轴断点的NVD3折线图。想要包含破碎的符号

时间:2016-02-25 12:46:15

标签: d3.js svg nvd3.js

我想在我的nvd3折线图中包含x轴断点(SQUIGGLE符号)。与下面给出的链接中的此图像类似。

是否可以使用nvd3包含此符号?

In this image, I want to include Squiggle symbol

提前致谢。

我在下面添加了我的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;
            });

0 个答案:

没有答案