d3.js nvd3 问题：同一 HTML 页面上的不同图表看起来相同（即使它们具有不同的 ID）

Question

您好，我一直在使用具有不同值的 "multi Bar Horizontal Charts"，在单独的 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 的第二个定义绘制的。对于这个简单的示例，使用不同的名称声明第二个数据集。

d3.js nvd3 问题：同一 HTML 页面上的不同图表看起来相同（即使它们具有不同的 ID）

d3.js nvd3 issue: different charts on the same HTML page look the same (even though they have different IDs)

javascript

html

d3.js

nvd3.js