playground
/
c3
mirror of https://github.com/masayuki0812/c3.git
1
0
Fork 0
Code Issues Releases Activity
Browse Source

Add grid API - #63

pull/66/head
Masayuki Tanaka 11 years ago
parent
c904eb115c
commit
2894cc1adb
4 changed files with 106 additions and 20 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 81
      c3.js
  2. 4
      c3.min.js
  3. 20
      htdocs/samples/grid_x_lines.html
  4. 21
      htdocs/samples/grid_y_lines.html

81
c3.js
Unescape View File

@ -2321,28 +2321,33 @@
.data(__grid_x_lines);
// enter
xgridLine = xgridLines.enter().append('g')
.attr("class", "xgrid-line");
.attr("class", function (d) { return "xgrid-line xgrid-line-" + (d['class'] ? d['class'] : ''); });
xgridLine.append('line')
.attr("class", function (d) { return d.class ? d.class : ''; });
.style("opacity", 0);
xgridLine.append('text')
.attr("class", function (d) { return d.class ? d.class : ''; })
.attr("text-anchor", "end")
.attr("transform", __axis_rotated ? "" : "rotate(-90)")
.attr('dx', __axis_rotated ? 0 : -margin.top)
.attr('dy', -5)
.text(function (d) { return d.text; });
.style("opacity", 0);
// udpate
xgridLines.selectAll('line')
xgridLines.select('line')
.transition().duration(duration)
.attr("x1", __axis_rotated ? 0 : xv)
.attr("x2", __axis_rotated ? width : xv)
.attr("y1", __axis_rotated ? xv : margin.top)
.attr("y2", __axis_rotated ? xv : height);
xgridLines.selectAll('text')
.attr("y2", __axis_rotated ? xv : height)
.style("opacity", 1);
xgridLines.select('text')
.transition().duration(duration)
.attr("x", __axis_rotated ? width : 0)
.attr("y", xv);
.attr("y", xv)
.text(function (d) { return d.text; })
.style("opacity", 1);
// exit
xgridLines.exit().remove();
xgridLines.exit().transition().duration(duration)
.style("opacity", 0)
.remove();
}
// Y-Grid
if (withY && __grid_y_show) {
@ -2361,28 +2366,33 @@
.data(__grid_y_lines);
// enter
ygridLine = ygridLines.enter().append('g')
.attr("class", "ygrid-line");
.attr("class", function (d) { return "ygrid-line ygrid-line-" + (d.class ? d.class : ''); });
ygridLine.append('line')
.attr("class", function (d) { return d.class ? d.class : ''; });
.style("opacity", 0);
ygridLine.append('text')
.attr("class", function (d) { return d.class ? d.class : ''; })
.attr("text-anchor", "end")
.attr("transform", __axis_rotated ? "rotate(-90)" : "")
.attr('dx', __axis_rotated ? 0 : -margin.top)
.attr('dy', -5)
.text(function (d) { return d.text; });
.style("opacity", 0);
// update
ygridLines.selectAll('line')
ygridLines.select('line')
.transition().duration(duration)
.attr("x1", __axis_rotated ? yv : 0)
.attr("x2", __axis_rotated ? yv : width)
.attr("y1", __axis_rotated ? 0 : yv)
.attr("y2", __axis_rotated ? height : yv);
ygridLines.selectAll('text')
.attr("y2", __axis_rotated ? height : yv)
.style("opacity", 1);
ygridLines.select('text')
.transition().duration(duration)
.attr("x", __axis_rotated ? 0 : width)
.attr("y", yv);
.attr("y", yv)
.text(function (d) { return d.text; })
.style("opacity", 1);
// exit
ygridLines.exit().remove();
ygridLines.exit().transition().duration(duration)
.style("opacity", 0)
.remove();
}
// bars
@ -2985,6 +2995,11 @@
function isArc(d) {
return 'data' in d && hasTarget(d.data.id);
}
function getGridFilter(params) {
var value = params && params.value ? params.value : null,
klass = params && params['class'] ? params['class'] : null;
return value ? function (line) { return line.value !== value; } : klass ? function (line) { return line['class'] !== klass; } : function () { return true; };
}
c3.focus = function (targetId) {
var candidates = svg.selectAll(getTargetSelector(targetId)),
@ -3192,6 +3207,36 @@
return __data_groups;
};
c3.xgrids = function (grids) {
if (! grids) { return __grid_x_lines; }
__grid_x_lines = grids;
redraw();
return __grid_x_lines;
};
c3.xgrids.add = function (grids) {
if (! grids) { return; }
return c3.xgrids(__grid_x_lines.concat(grids));
};
c3.xgrids.remove = function (params) { // TODO: multiple
var filter = getGridFilter(params);
return c3.xgrids(__grid_x_lines.filter(filter));
};
c3.ygrids = function (grids) {
if (! grids) { return __grid_y_lines; }
__grid_y_lines = grids;
redraw();
return __grid_y_lines;
};
c3.ygrids.add = function (grids) {
if (! grids) { return; }
return c3.ygrids(__grid_y_lines.concat(grids));
};
c3.ygrids.remove = function (params) { // TODO: multiple
var filter = getGridFilter(params);
return c3.ygrids(__grid_y_lines.filter(filter));
};
c3.regions = function (regions) {
if (isUndefined(regions)) { return __regions; }
__regions = regions;

4
c3.min.js vendored
View File

File diff suppressed because one or more lines are too long

20
htdocs/samples/grid_x_lines.html
Unescape View File

@ -24,6 +24,26 @@
}
}
});
setTimeout(function () {
chart.xgrids([{value: 1, text:'Lable 1'}, {value: 4, text: 'Lable 4'}]);
}, 1000);
setTimeout(function () {
chart.xgrids([{value: 2, text:'Lable 2'}]);
}, 2000);
setTimeout(function () {
chart.xgrids.add([{value: 3, text:'Lable 3', class:'hoge'}]);
}, 3000);
setTimeout(function () {
chart.xgrids.remove({value:2});
}, 4000);
setTimeout(function () {
chart.xgrids.remove({class:'hoge'});
}, 5000);
</script>
</body>
</html>

21
htdocs/samples/grid_y_lines.html
Unescape View File

@ -24,6 +24,27 @@
}
}
});
setTimeout(function () {
chart.ygrids([{value: 130, text:'Lable 130'}, {value: 50, text: 'Lable 50'}]);
}, 1000);
setTimeout(function () {
chart.ygrids([{value: 130, text:'Lable 130', class: 'hoge'}]);
}, 2000);
setTimeout(function () {
chart.ygrids.add([{value: 230, text:'Lable 230'}]);
}, 3000);
setTimeout(function () {
chart.ygrids.remove({value: 230});
}, 4000);
setTimeout(function () {
chart.ygrids.remove({class: 'hoge'});
}, 5000);
</script>
</body>
</html>

Write Preview
Loading…
Cancel
Save