Skip to content

C
c3-closed
Commit 2894cc1a authored by Masayuki Tanaka's avatar Masayuki Tanaka
Browse files
Options

Add grid API - #63

parent c904eb11
Hide whitespace changes
Inline Side-by-side
Showing with 104 additions and 18 deletions
c3.js
View file @ 2894cc1a
......@@ -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;
......
c3.min.js
View file @ 2894cc1a
This source diff could not be displayed because it is too large. You can view the blob instead.
htdocs/samples/grid_x_lines.html
View file @ 2894cc1a
......@@ -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>
htdocs/samples/grid_y_lines.html
View file @ 2894cc1a
......@@ -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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment