如何使x轴在d3折线图中滚动 [英] how to make the x axis scrollable in a d3 line chart graph
本文介绍了如何使x轴在d3折线图中滚动的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
下面是我使用的代码。这段代码对我很好，但问题是当出来为下面的代码，图的一些部分不显示在x轴。一些部分被隐藏，因为x轴长度不够显示。所以我决定让这个图形可滚动，我也试着一个代码，使这个可滚动。但它没有工作。
请帮我整理这个。 >
我使用这个引用： -
HTML代码：
< div class =row>
< div class =col-sm-12>
< div class =lineChart1style =overflow：scroll>
< svg width =960height =500style =overflow：scroll>< / svg>
< / div>
< / div>
< / div>
JAVASCRIPT代码：
function createLineChart（）{
var number = 1;
var data = [{label：Execution 1 - buddhika @ gmail.com，
x：[1，2，2，3，3，4 4，5，5，6，6，7，7，8，8，9，9，10 3，3，3，3，3，3，6， 2，3，3，3，3，3，3，3，3 2，2，3，3，3，3
var xy_chart = d3_xy_chart（）
.width（960）
.height（500）
.xlabel（TCS）
.ylabel（STATUS）;
var svg = d3.select（。lineChart+ number）.append（svg）
.datum（data）
.call（xy_chart）;
函数d3_xy_chart（）{
var width = 640，
height =
xlabel =X轴标签，
ylabel =Y轴标签;
函数图（选择，svg）{
selection.each（function（datasets）{
//
//创建图。
//
var margin = {top：20，right：80，bottom：30，left：50}，
innerwidth = width - margin.left - margin.right，
innerheight = height - margin.top - margin.bottom;
var x_scale = d3.scale.linear（）
.range（[0，innerwidth]）
.domain（[d3.min（datasets，function（d）{
return d3.min（dx）;
}），
d3.max
return d3.max（dx）;
}）];
var y_scale = d3.scale.linear（）
.range [innerheight，0]）
.domain（[d3.min（datasets，function（d）{
return d3.min（dy）;
}），
d3.max（datasets，function（d）{
return d3.max（d.y）;
}）]）;
var color_scale = d3.scale.category10（）
.domain（d3.range（datasets.length））;
var x_axis = d3.svg.axis（）
.scale（x_scale）
.orient（bottom）
.tickFormat ）{
if（d％1 == 0）{
return parseInt（d）
} else {
return
}
}）
var y_axis = d3.svg.axis（）
.scale（y_scale）
.orient（left）
.tickFormat ）{
if（d ==1）{
returnNOT EXECUTED
} else if（d == ）{
returnFAILED
} else if（d ==3）{
returnPASSED
} else {
return
}
}）;
var x_grid = d3.svg.axis（）
.scale（x_scale）
.orient（bottom）
.tickSize innerheight）
.tickFormat（）;
var y_grid = d3.svg.axis（）
.scale（y_scale）
.orient（left）
.tickSize（-innerwidth）
.tickFormat（）;
var draw_line = d3.svg.line（）
.interpolate（linear）
.x（function（d）{
return x_scale（d [ 0]）;
}）
.y（function（d）{
return y_scale（d [1]）;
}
var svg = d3.select（this）
.attr（width，width）
.attr（height，height）
.append g）
.attr（transform，translate（+ margin.left +，+ margin.top +））;
svg.append（g）
.attr（class，x grid）
.attr（transform innerheight +））
.call（x_grid）;
svg.append（g）
.attr（class，y grid）
.call（y_grid）;
svg.append（g）
.attr（class，x axis）
.attr（transform，translate innerheight +））
.call（x_axis）
.append（text）
.attr（dy，-.71em）
.attr x，innerwidth）
.style（text-anchor，end）
.text（xlabel）;
svg.append（g）
.attr（class，y axis）
.call（y_axis）
.append ）
.attr（transform，rotate（-90））
.attr（y，6）
.attr（dy，0.71em）
.style（text-anchor，end）
.text（ylabel）;
var data_lines = svg.selectAll（。d3_xy_chart_line）
.data（datasets.map（function（d）{
return d3.zip（dx，dy）
}））
.enter（）。append（g）
.attr（class，d3_xy_chart_line）;
data_lines.append（path）
.attr（class，line）
.attr（d {
return draw_line（d）;
}）
.attr（stroke，function（_，i）{
return color_scale（i）;
} ）;
data_lines.append（text）
.datum（function（d，i）{
return {name：datasets [i] .label，final：d [d .length - 1]};
}）
.attr（transform，function（d）{
return（translate（+ x_scale（d.final [0]）+ ，+
y_scale（d.final [1]）+））;
}）
.attr（x，3）
.attr dy，.35em）
.attr（fill，function（_，i）{
return color_scale（i）;
}）
.text （d）{
return d.name;
}）;
//滚动代码START
var xscale = d3.scale.linear（）。domain（[0,12]）。range（[0,12]），
yscale = d3.scale.linear .domain（[0，100]）。range（[innerheight，0]）;
var line = d3.svg.line（）
.x（function（d）{return xscale（d [0]）;}）
.y d）{return yscale（d [1]）;}）
.interpolate（'basis'）;
svg.append（'g'）
.datum（datasets）
.append（'path'）
.attr（'class'，'data' ）
.attr（'d'，line）;
var zoom = d3.behavior.zoom（）
.scaleExtent（[1，1]）$ b $ b .x（xscale）
.on （'zoom'，function（）{
svg.select（'。data'）。attr（'d'，line）
}
svg.call（zoom）;
//滚动代码END
}）;
}
解决方案
。问题是在json数据你提供了什么。所有json数据存储为字符串而不是整数。所有整数与双引号。这意味着它变成一个字符串。当从json数据中获取x轴的最大数量时，它将9作为最大数。它发生，因为9是数字是字符串时的最大数。因为该图在9之后不会继续，但预期值为12.在这里不需要滚动代码。只需通过在div（overflow：scroll）中添加css条目即可使图形可滚动。
UPDATE（buddhika）：
正确的json数据格式
var number = 1;
var data = [{label：Execution 1 - buddhika@gmail.com，
x：[1,2,2,3,3,4,4,5,5,6,6， 7,7,8,8,9,9,10,10,11,11,12,12]，
y：[3,3,3,3,3,3,2,2,3,3 ，3,3,3,3,3,3,3,2,2,3,3,3,3]];
Below is the code I used. This code is working fine to me, but problem is when the out put comes for the below code, some part of the graph doesn't show in x axis. Some parts are hidden because of the x axis length is not enough to show. So I decided to make this graph scrollable and also I tried a code to make this scrollable.But It didnt work.
please help me to sort out this.
I used this reference :- http://computationallyendowed.com/blog/2013/01/21/bounded-panning-in-d3.html
graph :
HTML CODE:
<div class="row">
<div class="col-sm-12">
<div class="lineChart1" style=" overflow: scroll">
<svg width="960" height="500" style=" overflow: scroll"></svg>
</div>
</div>
</div>
JAVASCRIPT CODE:
function createLineChart() {
var number=1;
var data = [ { label: "Execution 1 - buddhika@gmail.com",
x: ["1","2","2","3","3","4","4","5","5","6","6","7","7","8","8","9","9","10","10","11","11","12","12"],
y: ["3","3","3","3","3","3","2","2","3","3","3","3","3","3","3","3","3","3","2","2","3","3","3","3"] }] ;
var xy_chart = d3_xy_chart()
.width(960)
.height(500)
.xlabel("TCS")
.ylabel("STATUS");
var svg = d3.select(".lineChart" + number).append("svg")
.datum(data)
.call(xy_chart);
function d3_xy_chart() {
var width = 640,
height = 480,
xlabel = "X Axis Label",
ylabel = "Y Axis Label";
function chart(selection, svg) {
selection.each(function (datasets) {
//
// Create the plot.
//
var margin = {top: 20, right: 80, bottom: 30, left: 50},
innerwidth = width - margin.left - margin.right,
innerheight = height - margin.top - margin.bottom;
var x_scale = d3.scale.linear()
.range([0, innerwidth])
.domain([d3.min(datasets, function (d) {
return d3.min(d.x);
}),
d3.max(datasets, function (d) {
return d3.max(d.x);
})]);
var y_scale = d3.scale.linear()
.range([innerheight, 0])
.domain([d3.min(datasets, function (d) {
return d3.min(d.y);
}),
d3.max(datasets, function (d) {
return d3.max(d.y);
})]);
var color_scale = d3.scale.category10()
.domain(d3.range(datasets.length));
var x_axis = d3.svg.axis()
.scale(x_scale)
.orient("bottom")
.tickFormat(function (d, i) {
if (d % 1 == 0) {
return parseInt(d)
} else {
return " "
}
});
var y_axis = d3.svg.axis()
.scale(y_scale)
.orient("left")
.tickFormat(function (d, i) {
if (d == "1") {
return "NOT EXECUTED"
} else if (d == "2") {
return "FAILED"
} else if (d == "3") {
return "PASSED"
} else {
return " "
}
});
var x_grid = d3.svg.axis()
.scale(x_scale)
.orient("bottom")
.tickSize(-innerheight)
.tickFormat("");
var y_grid = d3.svg.axis()
.scale(y_scale)
.orient("left")
.tickSize(-innerwidth)
.tickFormat("");
var draw_line = d3.svg.line()
.interpolate("linear")
.x(function (d) {
return x_scale(d[0]);
})
.y(function (d) {
return y_scale(d[1]);
});
var svg = d3.select(this)
.attr("width", width)
.attr("height", height)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
svg.append("g")
.attr("class", "x grid")
.attr("transform", "translate(0," + innerheight + ")")
.call(x_grid);
svg.append("g")
.attr("class", "y grid")
.call(y_grid);
svg.append("g")
.attr("class", "x axis")
.attr("transform", "translate(0," + innerheight + ")")
.call(x_axis)
.append("text")
.attr("dy", "-.71em")
.attr("x", innerwidth)
.style("text-anchor", "end")
.text(xlabel);
svg.append("g")
.attr("class", "y axis")
.call(y_axis)
.append("text")
.attr("transform", "rotate(-90)")
.attr("y", 6)
.attr("dy", "0.71em")
.style("text-anchor", "end")
.text(ylabel);
var data_lines = svg.selectAll(".d3_xy_chart_line")
.data(datasets.map(function (d) {
return d3.zip(d.x, d.y);
}))
.enter().append("g")
.attr("class", "d3_xy_chart_line");
data_lines.append("path")
.attr("class", "line")
.attr("d", function (d) {
return draw_line(d);
})
.attr("stroke", function (_, i) {
return color_scale(i);
});
data_lines.append("text")
.datum(function (d, i) {
return {name: datasets[i].label, final: d[d.length - 1]};
})
.attr("transform", function (d) {
return ( "translate(" + x_scale(d.final[0]) + "," +
y_scale(d.final[1]) + ")" );
})
.attr("x", 3)
.attr("dy", ".35em")
.attr("fill", function (_, i) {
return color_scale(i);
})
.text(function (d) {
return d.name;
});
// scrolling code START
var xscale = d3.scale.linear().domain([0, 12]).range([0, 12]),
yscale = d3.scale.linear().domain([0, 100]).range([innerheight, 0]);
var line = d3.svg.line()
.x(function(d) { return xscale(d[0]); })
.y(function(d) { return yscale(d[1]); })
.interpolate('basis');
svg.append('g')
.datum(datasets)
.append('path')
.attr('class', 'data')
.attr('d', line);
var zoom = d3.behavior.zoom()
.scaleExtent([1, 1])
.x(xscale)
.on('zoom', function() {
svg.select('.data').attr('d', line)
});
svg.call(zoom);
// Scrolling code END
});
}
解决方案
i found the issue in here. issue is in json data what you provided. that all json data stored as strings not as integers. all integer numbers with in the double quotes. that mean it become as a string. when the max number taking for the x axis from the json data, it take the 9 as max number. it happen because 9 is the max number when numbers are strings. because of that graph not going to continue after 9. but expected value is 12. no need the scrolling code here. simply can make the graph scrollable by adding css entry in div ("overflow: scroll")
UPDATE (buddhika):
correct json data format
var number=1;
var data = [ { label: "Execution 1 - buddhika@gmail.com",
x: [1,2,2,3,3,4,4,5,5,6,6,7,7,8,8,9,9,10,10,11,11,12,12],
y: [3,3,3,3,3,3,2,2,3,3,3,3,3,3,3,3,3,3,2,2,3,3,3,3] }] ;
这篇关于如何使x轴在d3折线图中滚动的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
