Warning: file_get_contents(/data/phpspider/zhask/data//catemap/8/svg/2.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
D3.js 带x轴断开的NVD3折线图。要包括断开的符号吗_D3.js_Svg_Nvd3.js - Fatal编程技术网

D3.js 带x轴断开的NVD3折线图。要包括断开的符号吗

D3.js 带x轴断开的NVD3折线图。要包括断开的符号吗,d3.js,svg,nvd3.js,D3.js,Svg,Nvd3.js,我想在我的nvd3折线图中包括x轴中断(波形符号)。与下面给出的链接中的此图像类似 是否可以使用nvd3包含此符号 提前谢谢 我已经在下面包含了我的nvd3折线图代码 nv.addGraph(function() { chart = nv.models.lineChart() .options({ transitionDuration: 300,

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

是否可以使用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;
            });

NVD3目前不支持任何轴打断。使用SVG绘制这些换行符并不是更好的选择,因为它不会根据数据进行操作。