Replacing discreteBar chart with a model... getting rid of charts collection

12 years ago · b5cabe11d7
parent a013082def
commit b5cabe11d7
4 changed files with 23 additions and 21 deletions
--- a/examples/discreteBarChart.html
+++ b/examples/discreteBarChart.html
@ -13,12 +13,16 @@ text {
  font: 12px sans-serif;
 }

-#chart1 {
+svg {
+  display: block;
+}
+
+#chart1 svg{
  height: 500px;
-  margin: 10px;
  min-width: 100px;
  min-height: 100px;
 /*
+  margin: 10px;
  Minimum height and width is a good idea to prevent negative SVG dimensions...
  For example width should be =< margin.left + margin.right + 1,
  of course 1 pixel for the entire chart would not be very useful, BUT should not have errors
@ -29,6 +33,7 @@ text {
 <body>

  <div id="chart1">
+    <svg></svg>
  </div>

 <script src="../lib/d3.v2.js"></script>
@ -38,7 +43,7 @@ text {
 <script src="../src/models/axis.js"></script>
 <script src="../src/models/discreteBar.js"></script>
 <script src="../src/models/discreteBarWithAxes.js"></script>
-<script src="../src/charts/discreteBarChart.js"></script>
+<script src="../src/models/discreteBarChart.js"></script>
 <script>


@ -88,13 +93,17 @@ historicalBarChart = [



-nv.charts.discreteBar()
-    .selector('#chart1')
-    .data(historicalBarChart)
+var chart = nv.models.discreteBarChart()
    .x(function(d) { return d.label })
    .y(function(d) { return d.value })
    .staggerLabels(historicalBarChart[0].values.length > 8)
-    .build();
+
+
+d3.select('#chart1 svg')
+    .datum(historicalBarChart)
+  .transition().duration(500)
+    .call(chart);
+


 </script>
--- a/examples/lineWithLegendChart.html
+++ b/examples/lineWithLegendChart.html
@ -50,7 +50,7 @@ svg {

 // Wrapping in nv.addGraph allows for '0 timeout render', stors rendered charts in nv.graphs, and may do more in the future... it's NOT required
 nv.addGraph(function() {  
-  chart = nv.models.lineWithLegend();
+  chart = nv.models.lineChart();

  chart.xAxis // chart sub-models (ie. xAxis, yAxis, etc) when accessed directly, return themselves, not the partent chart, so need to chain separately
      .tickFormat(d3.format(',r'));
--- a/src/charts/discreteBarChart.js
+++ b/src/charts/discreteBarChart.js
@ -25,7 +25,7 @@ nv.charts.discreteBar = function() {

  //setting component defaults
  graph.xAxis.tickFormat(function(d) { return d });
-  graph.yAxis.tickFormat(d3.format(',.2f'));
+  graph.yAxis.tickFormat(d3.format(',.f'));


  //TODO: consider a method more similar to how the models are built
--- a/src/models/lineChart.js
+++ b/src/models/lineChart.js
@ -1,5 +1,5 @@

-nv.models.lineWithLegend = function() {
+nv.models.lineChart = function() {
  var margin = {top: 30, right: 20, bottom: 50, left: 60},
      color = d3.scale.category20().range(),
      width = null, 
@ -86,8 +86,7 @@ nv.models.lineWithLegend = function() {


      xAxis
-        .domain(x.domain())
-        .range(x.range())
+        .scale(x)
        .ticks( availableWidth / 100 )
        .tickSize(-availableHeight, 0);

@ -98,8 +97,7 @@ nv.models.lineWithLegend = function() {


      yAxis
-        .domain(y.domain())
-        .range(y.range())
+        .scale(y)
        .ticks( availableHeight / 36 )
        .tickSize( -availableWidth, 0);

@ -137,13 +135,8 @@ nv.models.lineWithLegend = function() {
 */

      lines.dispatch.on('elementMouseover.tooltip', function(e) {
-        dispatch.tooltipShow({
-          point: e.point,
-          series: e.series,
-          pos: [e.pos[0] + margin.left, e.pos[1] + margin.top],
-          seriesIndex: e.seriesIndex,
-          pointIndex: e.pointIndex
-        });
+        e.pos = [e.pos[0] +  margin.left, e.pos[1] + margin.top];
+        dispatch.tooltipShow(e);
      });
      dispatch.on('tooltipShow', function(e) { showTooltip(e, this) } ); // TODO: maybe merge with above?