Browse Source

Fix bugs and update samples to use d3.v4

pull/2246/head
Masayuki Tanaka 7 years ago
parent
commit
8b9318f7a7
  1. 2
      htdocs/index.html
  2. 2
      htdocs/samples/area_zerobased.html
  3. 2
      htdocs/samples/axes_padding.html
  4. 2
      htdocs/samples/axes_range.html
  5. 2
      htdocs/samples/axes_x_range_timeseries.html
  6. 2
      htdocs/samples/axes_x_tick_culling.html
  7. 2
      htdocs/samples/axes_x_tick_fit.html
  8. 2
      htdocs/samples/axes_x_tick_rotate.html
  9. 2
      htdocs/samples/axes_x_tick_values.html
  10. 2
      htdocs/samples/axes_y2.html
  11. 2
      htdocs/samples/axes_y_default.html
  12. 2
      htdocs/samples/bar_zerobased.html
  13. 2
      htdocs/samples/bindto.html
  14. 2
      htdocs/samples/chart_area_spline.html
  15. 2
      htdocs/samples/chart_area_spline_stacked.html
  16. 2
      htdocs/samples/chart_area_stacked.html
  17. 2
      htdocs/samples/chart_area_step.html
  18. 2
      htdocs/samples/chart_area_step_stacked.html
  19. 2
      htdocs/samples/chart_bar_space.html
  20. 4
      htdocs/samples/chart_combination.html
  21. 2
      htdocs/samples/chart_donut.html
  22. 2
      htdocs/samples/chart_gauge.html
  23. 2
      htdocs/samples/chart_pie_sort.html
  24. 2
      htdocs/samples/chart_scatter.html
  25. 4
      htdocs/samples/chart_spline.html
  26. 2
      htdocs/samples/chart_step.html
  27. 2
      htdocs/samples/custom_x_categorized.html
  28. 2
      htdocs/samples/custom_x_scale.html
  29. 2
      htdocs/samples/custom_xs_scale.html
  30. 4
      htdocs/samples/data_columned.html
  31. 4
      htdocs/samples/data_hide.html
  32. 2
      htdocs/samples/data_json.html
  33. 2
      htdocs/samples/data_label_format.html
  34. 2
      htdocs/samples/data_load.html
  35. 2
      htdocs/samples/data_load_timeseries.html
  36. 2
      htdocs/samples/data_region.html
  37. 2
      htdocs/samples/data_region_timeseries.html
  38. 4
      htdocs/samples/data_rowed.html
  39. 2
      htdocs/samples/data_url.html
  40. 4
      htdocs/samples/different_category_datasets.html
  41. 2
      htdocs/samples/domain_y.html
  42. 2
      htdocs/samples/emptydata.html
  43. 2
      htdocs/samples/grid_focus.html
  44. 2
      htdocs/samples/grid_x_lines.html
  45. 2
      htdocs/samples/grid_x_lines_timeseries.html
  46. 2
      htdocs/samples/grids.html
  47. 2
      htdocs/samples/grids_timeseries.html
  48. 2
      htdocs/samples/legend.html
  49. 2
      htdocs/samples/padding.html
  50. 2
      htdocs/samples/padding_update.html
  51. 4
      htdocs/samples/point_r.html
  52. 4
      htdocs/samples/point_show.html
  53. 2
      htdocs/samples/regions.html
  54. 2
      htdocs/samples/regions_timeseries.html
  55. 2
      htdocs/samples/tooltip_grouped.html
  56. 4
      htdocs/samples/tooltip_show.html
  57. 2
      htdocs/samples/zoom_category.html
  58. 5
      src/api.flow.js
  59. 6
      src/core.js
  60. 10
      src/data.convert.js
  61. 27
      src/grid.js
  62. 36
      src/region.js
  63. 13
      src/shape.bar.js
  64. 38
      src/shape.line.js

2
htdocs/index.html

@ -365,7 +365,7 @@
<a href="./samples/zoom.html">
Enable zoom
</a>
<a href="./samples/zoom.html">
<a href="./samples/zoom_category.html">
Zoom on category axis
</a>
<a href="./samples/zoom_reduction.html">

2
htdocs/samples/area_zerobased.html

@ -5,7 +5,7 @@
<body>
<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>
var chart = c3.generate({

2
htdocs/samples/axes_padding.html

@ -6,7 +6,7 @@
<div id="chart1"></div>
<div id="chart2"></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>

2
htdocs/samples/axes_range.html

@ -6,7 +6,7 @@
<div id="chart1"></div>
<div id="chart2"></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>

2
htdocs/samples/axes_x_range_timeseries.html

@ -6,7 +6,7 @@
<div id="chart1"></div>
<div id="chart2"></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>

2
htdocs/samples/axes_x_tick_culling.html

@ -5,7 +5,7 @@
<body>
<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>
var chart = c3.generate({

2
htdocs/samples/axes_x_tick_fit.html

@ -5,7 +5,7 @@
<body>
<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>
var chart = c3.generate({

2
htdocs/samples/axes_x_tick_rotate.html

@ -5,7 +5,7 @@
<body>
<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>
var chart = c3.generate({

2
htdocs/samples/axes_x_tick_values.html

@ -6,7 +6,7 @@
<div id="chart1"></div>
<div id="chart2"></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>

2
htdocs/samples/axes_y2.html

@ -5,7 +5,7 @@
<body>
<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>
var chart = c3.generate({

2
htdocs/samples/axes_y_default.html

@ -5,7 +5,7 @@
<body>
<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>
var chart = c3.generate({

2
htdocs/samples/bar_zerobased.html

@ -5,7 +5,7 @@
<body>
<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>
var chart = c3.generate({

2
htdocs/samples/bindto.html

@ -7,7 +7,7 @@
<div class="chart2" style="height:150px;"></div>
<div class="chart3" style="height:150px;"></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>
var chart1 = c3.generate({

2
htdocs/samples/chart_area_spline.html

@ -7,7 +7,7 @@
<div id="chart2"></div>
<div id="chart3"></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>

2
htdocs/samples/chart_area_spline_stacked.html

@ -7,7 +7,7 @@
<div id="chart2"></div>
<div id="chart3"></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>

2
htdocs/samples/chart_area_stacked.html

@ -7,7 +7,7 @@
<div id="chart2"></div>
<div id="chart3"></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>

2
htdocs/samples/chart_area_step.html

@ -7,7 +7,7 @@
<div id="chart2"></div>
<div id="chart3"></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>

2
htdocs/samples/chart_area_step_stacked.html

@ -7,7 +7,7 @@
<div id="chart2"></div>
<div id="chart3"></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>

2
htdocs/samples/chart_bar_space.html

@ -5,7 +5,7 @@
<body>
<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>

4
htdocs/samples/chart_combination.html

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

2
htdocs/samples/chart_donut.html

@ -5,7 +5,7 @@
<body>
<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>
var chart = c3.generate({

2
htdocs/samples/chart_gauge.html

@ -8,7 +8,7 @@
<div id="chart2"></div>
<div id="chart3"></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>
var chart = c3.generate({

2
htdocs/samples/chart_pie_sort.html

@ -5,7 +5,7 @@
<body>
<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>

2
htdocs/samples/chart_scatter.html

@ -5,7 +5,7 @@
<body>
<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>
var chart = c3.generate({

4
htdocs/samples/chart_spline.html

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

2
htdocs/samples/chart_step.html

@ -5,7 +5,7 @@
<body>
<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>
var chart = c3.generate({

2
htdocs/samples/custom_x_categorized.html

@ -5,7 +5,7 @@
<body>
<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>
var chart = c3.generate({

2
htdocs/samples/custom_x_scale.html

@ -5,7 +5,7 @@
<body>
<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>
var chart = c3.generate({

2
htdocs/samples/custom_xs_scale.html

@ -5,7 +5,7 @@
<body>
<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>
var chart = c3.generate({

4
htdocs/samples/data_columned.html

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

4
htdocs/samples/data_hide.html

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

2
htdocs/samples/data_json.html

@ -5,7 +5,7 @@
<body>
<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>

2
htdocs/samples/data_label_format.html

@ -5,7 +5,7 @@
<body>
<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>
var chart = c3.generate({

2
htdocs/samples/data_load.html

@ -5,7 +5,7 @@
<body>
<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>

2
htdocs/samples/data_load_timeseries.html

@ -5,7 +5,7 @@
<body>
<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>
var chart = c3.generate({

2
htdocs/samples/data_region.html

@ -5,7 +5,7 @@
<body>
<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>
var chart = c3.generate({

2
htdocs/samples/data_region_timeseries.html

@ -5,7 +5,7 @@
<body>
<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>
var chart = c3.generate({

4
htdocs/samples/data_rowed.html

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

2
htdocs/samples/data_url.html

@ -5,7 +5,7 @@
<body>
<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>

4
htdocs/samples/different_category_datasets.html

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

2
htdocs/samples/domain_y.html

@ -10,7 +10,7 @@
<div id="chart2"></div>
<div id="chart3"></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>

2
htdocs/samples/emptydata.html

@ -5,7 +5,7 @@
<body>
<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>

2
htdocs/samples/grid_focus.html

@ -5,7 +5,7 @@
<body>
<div id="chart1"></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>

2
htdocs/samples/grid_x_lines.html

@ -6,7 +6,7 @@
<div id="chart1"></div>
<div id="chart2"></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>

2
htdocs/samples/grid_x_lines_timeseries.html

@ -6,7 +6,7 @@
<div id="chart1"></div>
<div id="chart2"></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>

2
htdocs/samples/grids.html

@ -10,7 +10,7 @@
<div id="chart5"></div>
<div id="chart6"></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>

2
htdocs/samples/grids_timeseries.html

@ -7,7 +7,7 @@
<div id="chart2"></div>
<div id="chart3"></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>

2
htdocs/samples/legend.html

@ -10,7 +10,7 @@
<div id="chart5"></div>
<div id="chart6"></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>

2
htdocs/samples/padding.html

@ -21,7 +21,7 @@
<div id="chart9"></div>
<div id="chart10"></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>

2
htdocs/samples/padding_update.html

@ -5,7 +5,7 @@
<body>
<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>

4
htdocs/samples/point_r.html

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

4
htdocs/samples/point_show.html

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

2
htdocs/samples/regions.html

@ -5,7 +5,7 @@
<body>
<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>
var chart = c3.generate({

2
htdocs/samples/regions_timeseries.html

@ -5,7 +5,7 @@
<body>
<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>

2
htdocs/samples/tooltip_grouped.html

@ -5,7 +5,7 @@
<body>
<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>

4
htdocs/samples/tooltip_show.html

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

2
htdocs/samples/zoom_category.html

@ -6,7 +6,7 @@
<div id="chart"></div>
<button onclick="load()">Load</button>
<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>

5
src/api.flow.js

@ -250,7 +250,10 @@ c3_chart_internal_fn.generateFlow = function (args) {
// draw again for removing flowed elements and reverting attr
xgrid
.attr('transform', null)
.attr($$.xgridAttr);
.attr('x1', $$.xgridAttr.x1)
.attr('x2', $$.xgridAttr.x2)
.attr('y1', $$.xgridAttr.y1)
.attr('y2', $$.xgridAttr.y2);
xgridLines
.attr('transform', null);
xgridLines.select('line')

6
src/core.js

@ -279,8 +279,10 @@ c3_chart_internal_fn.initWithData = function (data) {
// Cover whole with rects for events
$$.initEventRect();
// TODO: fix
$$.main.select('.' + CLASS.eventRect).call($$.zoom).on("dblclick.zoom", null);
// event rect handle zoom event as well
if (config.zoom_enabled) {
$$.main.select('.' + CLASS.eventRect).call($$.zoom).on("dblclick.zoom", null);
}
// Define g for chart
$$.initChartElements();

10
src/data.convert.js

@ -3,7 +3,7 @@ import { isValue, isUndefined, isDefined, notEmpty } from './util';
c3_chart_internal_fn.convertUrlToData = function (url, mimeType, headers, keys, done) {
var $$ = this, type = mimeType ? mimeType : 'csv';
var req = $$.d3.xhr(url);
var req = $$.d3.request(url);
if (headers) {
Object.keys(headers).forEach(function (header) {
req.header(header, headers[header]);
@ -26,22 +26,22 @@ c3_chart_internal_fn.convertUrlToData = function (url, mimeType, headers, keys,
});
};
c3_chart_internal_fn.convertXsvToData = function (xsv, parser) {
var rows = parser.parseRows(xsv), d;
var rows = parser(xsv), d;
if (rows.length === 1) {
d = [{}];
rows[0].forEach(function (id) {
d[0][id] = null;
});
} else {
d = parser.parse(xsv);
d = parser(xsv);
}
return d;
};
c3_chart_internal_fn.convertCsvToData = function (csv) {
return this.convertXsvToData(csv, this.d3.csv);
return this.convertXsvToData(csv, this.d3.csvParse);
};
c3_chart_internal_fn.convertTsvToData = function (tsv) {
return this.convertXsvToData(tsv, this.d3.tsv);
return this.convertXsvToData(tsv, this.d3.tsvParse);
};
c3_chart_internal_fn.convertJsonToData = function (json, keys) {
var $$ = this,

27
src/grid.js

@ -48,29 +48,36 @@ c3_chart_internal_fn.updateXGrid = function (withoutUpdate) {
'y2': $$.height
};
var xgrids = $$.main.select('.' + CLASS.xgrids).selectAll('.' + CLASS.xgrid)
var xgrid = $$.main.select('.' + CLASS.xgrids).selectAll('.' + CLASS.xgrid)
.data(xgridData);
$$.xgrid = xgrids.enter().append('line').attr("class", CLASS.xgrid).merge(xgrids);
var xgridEnter = xgrid.enter().append('line')
.attr("class", CLASS.xgrid);
$$.xgrid = xgridEnter.merge(xgrid);
if (!withoutUpdate) {
$$.xgrid.attr($$.xgridAttr)
$$.xgrid
.attr('x1', $$.xgridAttr.x1)
.attr('x2', $$.xgridAttr.x2)
.attr('y1', $$.xgridAttr.y1)
.attr('y2', $$.xgridAttr.y2)
.style("opacity", function () { return +d3.select(this).attr(config.axis_rotated ? 'y1' : 'x1') === (config.axis_rotated ? $$.height : 0) ? 0 : 1; });
}
xgrids.exit().remove();
xgrid.exit().remove();
};
c3_chart_internal_fn.updateYGrid = function () {
var $$ = this, config = $$.config,
gridValues = $$.yAxis.tickValues() || $$.y.ticks(config.grid_y_ticks);
var ygrids = $$.main.select('.' + CLASS.ygrids).selectAll('.' + CLASS.ygrid)
var ygrid = $$.main.select('.' + CLASS.ygrids).selectAll('.' + CLASS.ygrid)
.data(gridValues);
$$.ygrid = ygrids.enter().append('line')
.attr('class', CLASS.ygrid)
.merge(ygrids);
$$.ygrid.attr("x1", config.axis_rotated ? $$.y : 0)
var ygridEnter = ygrid.enter().append('line')
.attr('class', CLASS.ygrid);
$$.ygrid = ygridEnter.merge(ygrid);
$$.ygrid
.attr("x1", config.axis_rotated ? $$.y : 0)
.attr("x2", config.axis_rotated ? $$.y : $$.width)
.attr("y1", config.axis_rotated ? 0 : $$.y)
.attr("y2", config.axis_rotated ? $$.height : $$.y);
ygrids.exit().remove();
ygrid.exit().remove();
$$.smoothLines($$.ygrid, 'grid');
};

36
src/region.js

@ -14,36 +14,28 @@ c3_chart_internal_fn.updateRegion = function (duration) {
// hide if arc type
$$.region.style('visibility', $$.hasArcType() ? 'hidden' : 'visible');
$$.mainRegion = $$.main.select('.' + CLASS.regions).selectAll('.' + CLASS.region)
var mainRegion = $$.main.select('.' + CLASS.regions).selectAll('.' + CLASS.region)
.data(config.regions);
$$.mainRegion.enter().append('g')
var mainRegionEnter = mainRegion.enter().append('g')
.append('rect')
.attr("x", $$.regionX.bind($$))
.attr("y", $$.regionY.bind($$))
.attr("width", $$.regionWidth.bind($$))
.attr("height", $$.regionHeight.bind($$))
.style("fill-opacity", 0);
$$.mainRegion
$$.mainRegion = mainRegionEnter.merge(mainRegion)
.attr('class', $$.classRegion.bind($$));
$$.mainRegion.exit().transition().duration(duration)
mainRegion.exit().transition().duration(duration)
.style("opacity", 0)
.remove();
};
c3_chart_internal_fn.redrawRegion = function (withTransition) {
var $$ = this,
regions = $$.mainRegion.selectAll('rect').each(function () {
// data is binded to g and it's not transferred to rect (child node) automatically,
// then data of each rect has to be updated manually.
// TODO: there should be more efficient way to solve this?
var parentData = $$.d3.select(this.parentNode).datum();
$$.d3.select(this).datum(parentData);
}),
x = $$.regionX.bind($$),
y = $$.regionY.bind($$),
w = $$.regionWidth.bind($$),
h = $$.regionHeight.bind($$);
return [
(withTransition ? regions.transition() : regions)
.attr("x", x)
.attr("y", y)
.attr("width", w)
.attr("height", h)
var $$ = this, regions = $$.mainRegion;
return [(withTransition ? regions.transition() : regions)
.attr("x", $$.regionX.bind($$))
.attr("y", $$.regionY.bind($$))
.attr("width", $$.regionWidth.bind($$))
.attr("height", $$.regionHeight.bind($$))
.style("fill-opacity", function (d) { return isValue(d.opacity) ? d.opacity : 0.1; })
];
};

13
src/shape.bar.js

@ -31,17 +31,16 @@ c3_chart_internal_fn.updateBar = function (durationForExit) {
classBar = $$.classBar.bind($$),
initialOpacity = $$.initialOpacity.bind($$),
color = function (d) { return $$.color(d.id); };
var bars = $$.main.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
var mainBar = $$.main.selectAll('.' + CLASS.bars).selectAll('.' + CLASS.bar)
.data(barData);
$$.mainBar = bars.enter().append('path')
var mainBarEnter = mainBar.enter().append('path')
.attr("class", classBar)
.style("stroke", color)
.style("fill", color)
.merge(bars);
$$.mainBar
.style("fill", color);
$$.mainBar = mainBarEnter.merge(mainBar)
.style("opacity", initialOpacity);
bars.exit().transition().duration(durationForExit)
.remove();
mainBar.exit().transition().duration(durationForExit)
.style("opacity", 0);
};
c3_chart_internal_fn.redrawBar = function (drawBar, withTransition) {
return [

38
src/shape.line.js

@ -45,19 +45,17 @@ c3_chart_internal_fn.updateTargetsForLine = function (targets) {
};
c3_chart_internal_fn.updateLine = function (durationForExit) {
var $$ = this;
var lines = $$.main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
var mainLine = $$.main.selectAll('.' + CLASS.lines).selectAll('.' + CLASS.line)
.data($$.lineData.bind($$));
$$.mainLine = lines.enter().append('path')
var mainLineEnter = mainLine.enter().append('path')
.attr('class', $$.classLine.bind($$))
.style("stroke", $$.color)
.merge(lines);
$$.mainLine
.style("stroke", $$.color);
$$.mainLine = mainLineEnter.merge(mainLine)
.style("opacity", $$.initialOpacity.bind($$))
.style('shape-rendering', function (d) { return $$.isStepType(d) ? 'crispEdges' : ''; })
.attr('transform', null);
lines.exit().transition().duration(durationForExit)
.style('opacity', 0)
.remove();
mainLine.exit().transition().duration(durationForExit)
.style('opacity', 0);
};
c3_chart_internal_fn.redrawLine = function (drawLine, withTransition) {
return [
@ -223,17 +221,16 @@ c3_chart_internal_fn.lineWithRegions = function (d, x, y, _regions) {
c3_chart_internal_fn.updateArea = function (durationForExit) {
var $$ = this, d3 = $$.d3;
var areas = $$.main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
var mainArea = $$.main.selectAll('.' + CLASS.areas).selectAll('.' + CLASS.area)
.data($$.lineData.bind($$));
$$.mainArea = areas.enter().append('path')
var mainAreaEnter = mainArea.enter().append('path')
.attr("class", $$.classArea.bind($$))
.style("fill", $$.color)
.style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; }).merge(areas);
$$.mainArea
.style("opacity", function () { $$.orgAreaOpacity = +d3.select(this).style('opacity'); return 0; });
$$.mainArea = mainAreaEnter.merge(mainArea)
.style("opacity", $$.orgAreaOpacity);
areas.exit().transition().duration(durationForExit)
.style('opacity', 0)
.remove();
mainArea.exit().transition().duration(durationForExit)
.style('opacity', 0);
};
c3_chart_internal_fn.redrawArea = function (drawArea, withTransition) {
return [
@ -307,15 +304,16 @@ c3_chart_internal_fn.generateGetAreaPoints = function (areaIndices, isSub) { //
c3_chart_internal_fn.updateCircle = function () {
var $$ = this;
$$.mainCircle = $$.main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle)
var mainCircle = $$.main.selectAll('.' + CLASS.circles).selectAll('.' + CLASS.circle)
.data($$.lineOrScatterData.bind($$));
$$.mainCircle = $$.mainCircle.enter().append("circle")
var mainCircleEnter = mainCircle.enter().append("circle")
.attr("class", $$.classCircle.bind($$))
.attr("r", $$.pointR.bind($$))
.style("fill", $$.color).merge($$.mainCircle);
$$.mainCircle
.style("fill", $$.color);
$$.mainCircle = mainCircleEnter.merge(mainCircle)
.style("opacity", $$.initialOpacityForCircle.bind($$));
$$.mainCircle.exit().remove();
mainCircle.exit()
.style("opacity", 0);
};
c3_chart_internal_fn.redrawCircle = function (cx, cy, withTransition) {
var selectedCircles = this.main.selectAll('.' + CLASS.selectedCircle);

Loading…
Cancel
Save