d3.js nvd3の問題：同じHTMLページの異なるグラフは同じIDで表示されます（

Question

）別のHTMLページで異なる値の「マルチバー水平チャート」を使用しています異なる。同じページでは、IDが異なるにもかかわらず同じように見えます

ポブレムは何ですか？

これらはチャートである。http://codepen.io/neonpulp/pen/xOPmrN

以下は、HTMLとJSコードです。任意のヘルプ

<div id="chart-avapro" style="height: 500px;" class="with-3d-shadow with-transitions"> 
    <svg></svg> 
</div> 

<div id="chart-bocdar" style="height: 500px;" class="with-3d-shadow with-transitions"> 
    <svg></svg> 
</div> 

var long_short_data = [ 
    { 
     key: '1er trimestre', 
     color: "#438da7", 
     values: [ 
      { 
       "label" : "CONTROL, VIGILANCIA Y SEGUIMIENTO AMBIENTAL" , 
       "value" : 13 
      } , 
      { 
       "label" : "FORTALECIMIENTO INSTITUCIONAL" , 
       "value" : 0 
      } , 
      { 
       "label" : "COMUNICACIÓN, EDUCACIÓN E INVESTIGACIÓN AMBIENTAL" , 
       "value" : 37 
      } , 
      { 
       "label" : "MITIGACIÓN Y GESTIÓN DEL RIESGO AMBIENTAL" , 
       "value" : 0 
      } , 
      { 
       "label" : "EXPEDIENTE FORESTAL URBANO" , 
       "value" : 0 
      } , 
      { 
       "label" : "SISTEMA DE MONITOREO DE LA CALIDAD DEL AIRE" , 
       "value" : 13 
      } ,      
      { 
       "label" : "SISTEMA DE MONITOREO DE LA CALIDAD DE RECURSOS HÍDRICOS" , 
       "value" : 6 
      } , 
      { 
       "label" : "OPERACIÓN Y MANTENIMIENTO DE LA BOCANA Y DÁRSENA" , 
       "value" : 0 
      } , 
      { 
       "label" : "PARQUE DISTRITAL CIÉNAGA DE LA VIRGEN" , 
       "value" : 18 
      }                    
     ] 
    }, 
    { 
     key: '2do trimestre', 
     color: "#d86d18", 
     values: [ 
      { 
       "label" : "CONTROL, VIGILANCIA Y SEGUIMIENTO AMBIENTAL" , 
       "value" : 87 
      } , 
      { 
       "label" : "FORTALECIMIENTO INSTITUCIONAL" , 
       "value" : 66 
      } , 
      { 
       "label" : "COMUNICACIÓN, EDUCACIÓN E INVESTIGACIÓN AMBIENTAL" , 
       "value" : 63 
      } , 
      { 
       "label" : "MITIGACIÓN Y GESTIÓN DEL RIESGO AMBIENTAL" , 
       "value" : 5 
      } , 
      { 
       "label" : "EXPEDIENTE FORESTAL URBANO" , 
       "value" : 75 
      } , 
      { 
       "label" : "SISTEMA DE MONITOREO DE LA CALIDAD DEL AIRE" , 
       "value" : 33 
      } , 
      { 
       "label" : "SISTEMA DE MONITOREO DE LA CALIDAD DE RECURSOS HÍDRICOS" , 
       "value" : 32 
      } , 
      { 
       "label" : "OPERACIÓN Y MANTENIMIENTO DE LA BOCANA Y DÁRSENA" , 
       "value" : 27 
      } , 
      { 
       "label" : "PARQUE DISTRITAL CIÉNAGA DE LA VIRGEN" , 
       "value" : 17 
      }                             
     ] 

    } 
]; 


var chart; 
nv.addGraph(function() { 
    chart = nv.models.multiBarHorizontalChart() 
     .x(function(d) { return d.label }) 
     .y(function(d) { return d.value }) 
     .duration(250) 
     .margin({left: 345}) 
     .stacked(true); 

    chart.yAxis.tickFormat(d3.format(',.2f')); 

    chart.yAxis.tickFormat(function(d) { return d3.format(',f')(d)+ '%' }); 

    chart.yAxis.axisLabel(''); 
    chart.xAxis.axisLabel('').axisLabelDistance(20); 


    d3.select('#chart-avapro svg') 
     .datum(long_short_data) 
     .call(chart); 

    nv.utils.windowResize(chart.update); 

    chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); }); 
    chart.state.dispatch.on('change', function(state){ 
     nv.log('state', JSON.stringify(state)); 
    }); 
    return chart; 
}); 

var long_short_data = [ 
    { 
     key: '1er trimestre', 
     color: "#438da7", 
     values: [ 
      { 
       "label" : "Manual de Operación del Sistema Bocana y Darsena" , 
       "value" : 0 
      } , 
      { 
       "label" : "Acción Ejecutada/Acción Programada" , 
       "value" : 0 
      } , 
      { 
       "label" : "Relimpia Realizada/Relimpia Programada" , 
       "value" : 0 
      } , 
      { 
       "label" : "Batimetría Realizada/Batimetría Programada" , 
       "value" : 0 
      }                   
     ] 
    }, 
    { 
     key: '2do trimestre', 
     color: "#d86d18", 
     values: [ 
      { 
       "label" : "Manual de Operación del Sistema Bocana y Darsena" , 
       "value" : 100 
      } , 
      { 
       "label" : "Acción Ejecutada/Acción Programada" , 
       "value" : 10 
      } , 
      { 
       "label" : "Relimpia Realizada/Relimpia Programada" , 
       "value" : 0 
      } , 
      { 
       "label" : "Batimetría Realizada/Batimetría Programada" , 
       "value" : 0 
      }                            
     ] 

    } 
]; 


var chart; 
nv.addGraph(function() { 
    chart = nv.models.multiBarHorizontalChart() 
     .x(function(d) { return d.label }) 
     .y(function(d) { return d.value }) 
     .duration(250) 
     .margin({left: 345}) 
     .stacked(true); 

    chart.yAxis.tickFormat(d3.format(',.2f')); 

    chart.yAxis.tickFormat(function(d) { return d3.format(',f')(d)+ '%' }); 

    chart.yAxis.axisLabel(''); 
    chart.xAxis.axisLabel('').axisLabelDistance(20); 


    d3.select('#chart-bocdar svg') 
     .datum(long_short_data) 
     .call(chart); 

    nv.utils.windowResize(chart.update); 

    chart.dispatch.on('stateChange', function(e) { nv.log('New State:', JSON.stringify(e)); }); 
    chart.state.dispatch.on('change', function(state){ 
     nv.log('state', JSON.stringify(state)); 
    }); 
    return chart; 
}); 

Answer 1

ための高度でのおかげであなたはJSONデータlong_short_dataを再定義する前に、最初のグラフは、データがそれにバインドして描かれていますことを期待しています。起こっているのは、long_short_dataの2番目の定義を使用してグラフが描画されていることです。この単純な例では、別の名前を使用して2番目のデータセットを宣言します。