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

Fix api.grid and update samples to use d3.v4

pull/2246/head
Masayuki Tanaka 7 years ago
parent
8b9318f7a7
commit
bd1d321e83
9 changed files with 24 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 2
      htdocs/samples/api_axis_label.html
  2. 2
      htdocs/samples/api_axis_range.html
  3. 2
      htdocs/samples/api_data_colors.html
  4. 2
      htdocs/samples/api_legend.html
  5. 2
      htdocs/samples/api_transform.html
  6. 2
      htdocs/samples/api_xgrid_lines.html
  7. 4
      htdocs/samples/api_ygrid_lines.html
  8. 2
      htdocs/samples/element.html
  9. 17
      src/grid.js

2
htdocs/samples/api_axis_label.html
Unescape View File

@ -5,7 +5,7 @@
<body> <body>
<div id="chart"></div> <div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>
var chart = c3.generate({ var chart = c3.generate({

2
htdocs/samples/api_axis_range.html
Unescape View File

@ -5,7 +5,7 @@
<body> <body>
<div id="chart"></div> <div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>
var chart = c3.generate({ var chart = c3.generate({

2
htdocs/samples/api_data_colors.html
Unescape View File

@ -5,7 +5,7 @@
<body> <body>
<div id="chart"></div> <div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>

2
htdocs/samples/api_legend.html
Unescape View File

@ -5,7 +5,7 @@
<body> <body>
<div id="chart"></div> <div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>

2
htdocs/samples/api_transform.html
Unescape View File

@ -5,7 +5,7 @@
<body> <body>
<div id="chart"></div> <div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>

2
htdocs/samples/api_xgrid_lines.html
Unescape View File

@ -5,7 +5,7 @@
<body> <body>
<div id="chart"></div> <div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>

4
htdocs/samples/api_ygrid_lines.html
Unescape View File

@ -5,7 +5,7 @@
<body> <body>
<div id="chart"></div> <div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>
var chart = c3.generate({ var chart = c3.generate({
@ -20,7 +20,7 @@
}, },
grid: { grid: {
y: { y: {
// lines: [{value: 30, text:'Label 30'}, {value: 250, text: 'Label 250'}] lines: [{value: 30, text:'Label 30'}, {value: 250, text: 'Label 250'}]
} }
} }
}); });

2
htdocs/samples/element.html
Unescape View File

@ -7,7 +7,7 @@
<div id="chart2"></div> <div id="chart2"></div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> <script src="http://d3js.org/d3.v4.min.js" charset="utf-8"></script>
<script src="/js/c3.js"></script> <script src="/js/c3.js"></script>
<script> <script>

17
src/grid.js
Unescape View File

@ -95,7 +95,9 @@ c3_chart_internal_fn.yGridTextX = function (d) {
}; };
c3_chart_internal_fn.updateGrid = function (duration) { c3_chart_internal_fn.updateGrid = function (duration) {
var $$ = this, main = $$.main, config = $$.config, var $$ = this, main = $$.main, config = $$.config,
xgridLine, xgridLineEnter, ygridLine, ygridLineEnter, yv; xgridLine, xgridLineEnter, ygridLine, ygridLineEnter,
xv = $$.xv.bind($$), yv = $$.yv.bind($$),
xGridTextX = $$.xGridTextX.bind($$), yGridTextX = $$.yGridTextX.bind($$);
// hide if arc type // hide if arc type
$$.grid.style('visibility', $$.hasArcType() ? 'hidden' : 'visible'); $$.grid.style('visibility', $$.hasArcType() ? 'hidden' : 'visible');
@ -110,10 +112,16 @@ c3_chart_internal_fn.updateGrid = function (duration) {
xgridLineEnter = xgridLine.enter().append('g') xgridLineEnter = xgridLine.enter().append('g')
.attr("class", function (d) { return CLASS.xgridLine + (d['class'] ? ' ' + d['class'] : ''); }); .attr("class", function (d) { return CLASS.xgridLine + (d['class'] ? ' ' + d['class'] : ''); });
xgridLineEnter.append('line') xgridLineEnter.append('line')
.attr("x1", config.axis_rotated ? 0 : xv)
.attr("x2", config.axis_rotated ? $$.width : xv)
.attr("y1", config.axis_rotated ? xv : 0)
.attr("y2", config.axis_rotated ? xv : $$.height)
.style("opacity", 0); .style("opacity", 0);
xgridLineEnter.append('text') xgridLineEnter.append('text')
.attr("text-anchor", $$.gridTextAnchor) .attr("text-anchor", $$.gridTextAnchor)
.attr("transform", config.axis_rotated ? "" : "rotate(-90)") .attr("transform", config.axis_rotated ? "" : "rotate(-90)")
.attr("x", config.axis_rotated ? yGridTextX : xGridTextX)
.attr("y", xv)
.attr('dx', $$.gridTextDx) .attr('dx', $$.gridTextDx)
.attr('dy', -5) .attr('dy', -5)
.style("opacity", 0); .style("opacity", 0);
@ -135,16 +143,21 @@ c3_chart_internal_fn.updateGrid = function (duration) {
ygridLineEnter = ygridLine.enter().append('g') ygridLineEnter = ygridLine.enter().append('g')
.attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); }); .attr("class", function (d) { return CLASS.ygridLine + (d['class'] ? ' ' + d['class'] : ''); });
ygridLineEnter.append('line') ygridLineEnter.append('line')
.attr("x1", config.axis_rotated ? yv : 0)
.attr("x2", config.axis_rotated ? yv : $$.width)
.attr("y1", config.axis_rotated ? 0 : yv)
.attr("y2", config.axis_rotated ? $$.height : yv)
.style("opacity", 0); .style("opacity", 0);
ygridLineEnter.append('text') ygridLineEnter.append('text')
.attr("text-anchor", $$.gridTextAnchor) .attr("text-anchor", $$.gridTextAnchor)
.attr("transform", config.axis_rotated ? "rotate(-90)" : "") .attr("transform", config.axis_rotated ? "rotate(-90)" : "")
.attr("x", config.axis_rotated ? xGridTextX : yGridTextX)
.attr("y", yv)
.attr('dx', $$.gridTextDx) .attr('dx', $$.gridTextDx)
.attr('dy', -5) .attr('dy', -5)
.style("opacity", 0); .style("opacity", 0);
// update // update
$$.ygridLines = ygridLineEnter.merge(ygridLine); $$.ygridLines = ygridLineEnter.merge(ygridLine);
yv = $$.yv.bind($$);
$$.ygridLines.select('line') $$.ygridLines.select('line')
.transition().duration(duration) .transition().duration(duration)
.attr("x1", config.axis_rotated ? yv : 0) .attr("x1", config.axis_rotated ? yv : 0)

Write Preview
Loading…
Cancel
Save