来自geoj​​son的D3条形图

Question

有没有人在 div 对象中处理过程序化 D3 条形图？

我正在为一个项目在 web 地图（传单）中开发一系列图层，我正在努力处理这一部分。我了解如何将 D3 对象发送到 div 的过程，然后将其发送到弹出窗口中，但图表失败。

一些上下文：数据位于加载了链接关系的 geojson 中。我的目标是为单击区域的每个变量制作一个水平条形图（“LabMarPres”、“Educ”、“Earnings”、“Ind”、“Housing”、“AccToSer”、“EcPerfInd”）。

我找到了许多图表示例，其中包含以下数据：“名称”、“值”，但没有任何东西可以帮助我理解如何为一个区域名称制作图表，并为上面提到的每个值创建一个条形图。

目标是通过点击在弹出窗口中生成图表。

我很近，我能感觉到。我在小提琴中创建了一个样本。 感谢您为我指明正确方向的任何见解！

http://jsfiddle.net/kxamyoa5

代码：

var Sample = {
"type": "FeatureCollection",
"features": [
    {
        "type": "Feature",
        "properties": {
            "OBJECTID": 83,
            "Shape_Leng": 4.82699099667,
            "Shape_Area": 0.448245392274,
            "AreaName": "Area1",
            "LabMarPres": 0.47,
            "Educ": 0.56,
            "Earnings": 0.34,
            "Ind": 0.95,
            "Housing": 0.71,
            "AccToSer": 0.57,
            "EcPerfInd": 0.48
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [
                        -65.21807503043829,
                        47.80747318893657
                    ],
                    [
                        -65.12720779530349,
                        47.82663638466147
                    ],
                    [
                        -65.04717558318657,
                        47.83306401469258
                    ],
                    [
                        -65.03070994260975,
                        47.808330988384455
                    ],
                    [
                        -65.07368063185561,
                        47.78446441480094
                    ],
                    [
                        -65.32377354751117,
                        47.635343686761814
                    ],
                    [
                        -65.17873639716697,
                        47.47216492916817
                    ],
                    [
                        -65.29358005627455,
                        47.35396841221251
                    ],
                    [
                        -65.81588402532748,
                        47.23253275488281
                    ],
                    [
                        -66.21716123360403,
                        47.55064511288168
                    ],
                    [
                        -66.16380385856121,
                        47.966750274705475
                    ],
                    [
                        -65.73298300915849,
                        47.83039260553437
                    ],
                    [
                        -65.61017728505362,
                        47.65390380431717
                    ],
                    [
                        -65.21807503043829,
                        47.80747318893657
                    ]
                ]
            ]
        }
    },
    {
        "type": "Feature",
        "properties": {
            "OBJECTID": 107,
            "Shape_Leng": 5.09713294978,
            "Shape_Area": 0.285706288115,
            "AreaName": "Area2",
            "LabMarPres": 0.39,
            "Educ": 0.56,
            "Earnings": 0.39,
            "Ind": 0.84,
            "Housing": 0.65,
            "AccToSer": 0.53,
            "EcPerfInd": 0.45
        },
        "geometry": {
            "type": "MultiPolygon",
            "coordinates": [
                [
                    [
                        [
                            -81.86826509136085,
                            49.58016077120266
                        ],
                        [
                            -81.86738708234793,
                            49.31949724400266
                        ],
                        [
                            -81.96549742666485,
                            49.058330969698545
                        ],
                        [
                            -82.27583456731139,
                            49.320275585649824
                        ],
                        [
                            -81.86826509136085,
                            49.58016077120266
                        ]
                    ]
                ],
                [
                    [
                        [
                            -82.47671511650935,
                            49.58123795846507
                        ],
                        [
                            -82.67823302333534,
                            49.45000960406003
                        ],
                        [
                            -83.07798109635047,
                            49.44957771453994
                        ],
                        [
                            -83.07752144116154,
                            49.580390592052254
                        ],
                        [
                            -82.47671511650935,
                            49.58123795846507
                        ]
                    ]
                ]
            ]
        }
    },
    {
        "type": "Feature",
        "properties": {
            "OBJECTID": 162,
            "Shape_Leng": 5.12799091297,
            "Shape_Area": 0.610219990564,
            "AreaName": "Area3",
            "LabMarPres": 0.61,
            "Educ": 0.61,
            "Earnings": 0.44,
            "Ind": 0.89,
            "Housing": 0.58,
            "AccToSer": 0.65,
            "EcPerfInd": 0.53
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [
                        -80.81235205370427,
                        48.79754602502908
                    ],
                    [
                        -80.4177094535284,
                        48.798039046864574
                    ],
                    [
                        -80.27503105943583,
                        48.62345072447141
                    ],
                    [
                        -80.27454603796923,
                        48.45013510824867
                    ],
                    [
                        -80.017245116369,
                        48.27609909729557
                    ],
                    [
                        -80.40460246423231,
                        48.27565976138891
                    ],
                    [
                        -80.42081344738267,
                        48.450625616479044
                    ],
                    [
                        -80.8131945574828,
                        48.450522225020734
                    ],
                    [
                        -80.81279867681747,
                        48.27715668383394
                    ],
                    [
                        -81.72681332037837,
                        48.27687831128509
                    ],
                    [
                        -81.72739491914018,
                        48.7106311025434
                    ],
                    [
                        -80.94382841594859,
                        48.71044270986323
                    ],
                    [
                        -80.81235205370427,
                        48.79754602502908
                    ]
                ]
            ]
        }
    },
    {
        "type": "Feature",
        "properties": {
            "OBJECTID": 168,
            "Shape_Leng": 11.4173504124,
            "Shape_Area": 1.58006615738,
            "AreaName": "Area4",
            "LabMarPres": 0.49,
            "Educ": 0.54,
            "Earnings": 0.33,
            "Ind": 0.9,
            "Housing": 0.7,
            "AccToSer": 0.58,
            "EcPerfInd": 0.47
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [
                        -65.29358005627455,
                        47.35396841221251
                    ],
                    [
                        -64.88065039699819,
                        47.44903381755671
                    ],
                    [
                        -65.01747251744268,
                        47.27788412225448
                    ],
                    [
                        -65.26658863805517,
                        47.11635518624291
                    ],
                    [
                        -65.16514421283512,
                        47.03860454516371
                    ],
                    [
                        -65.14503370094451,
                        46.729783211825804
                    ],
                    [
                        -65.38608821330035,
                        46.61004800700999
                    ],
                    [
                        -65.58553702021726,
                        46.631193021640684
                    ],
                    [
                        -65.85170667362405,
                        46.336452850218905
                    ],
                    [
                        -66.16451905970678,
                        46.39648605738569
                    ],
                    [
                        -66.50983720911984,
                        46.294016035411744
                    ],
                    [
                        -66.62896209622374,
                        46.41230652882331
                    ],
                    [
                        -66.68829103710164,
                        46.84285340695919
                    ],
                    [
                        -67.0483476629143,
                        47.36288448253288
                    ],
                    [
                        -66.21716123360403,
                        47.55064511288168
                    ],
                    [
                        -65.81588402532748,
                        47.23253275488281
                    ],
                    [
                        -65.29358005627455,
                        47.35396841221251
                    ]
                ]
            ]
        }
    },
    {
        "type": "Feature",
        "properties": {
            "OBJECTID": 231,
            "Shape_Leng": 7.79008441871,
            "Shape_Area": 0.18922060249,
            "AreaName": "Area5",
            "LabMarPres": 0.41,
            "Educ": 0.56,
            "Earnings": 0.37,
            "Ind": 0.9,
            "Housing": 0.7,
            "AccToSer": 0.53,
            "EcPerfInd": 0.46
        },
        "geometry": {
            "type": "Polygon",
            "coordinates": [
                [
                    [
                        -64.88065039699819,
                        47.44903381755671
                    ],
                    [
                        -65.29358005627455,
                        47.35396841221251
                    ],
                    [
                        -65.17873639716697,
                        47.47216492916817
                    ],
                    [
                        -65.32377354751117,
                        47.635343686761814
                    ],
                    [
                        -65.07368063185561,
                        47.78446441480094
                    ],
                    [
                        -64.81585118768214,
                        47.80683922984662
                    ],
                    [
                        -64.67474884917999,
                        47.71399404289082
                    ],
                    [
                        -64.9034776061066,
                        47.557322269707015
                    ],
                    [
                        -64.88065039699819,
                        47.44903381755671
                    ]
                ]
            ]
        }
    }
]

}

    var map = L.map('map').setView([55, -95], 4);



    L.tileLayer('https://{s}.tiles.mapbox.com/v3/{id}/{z}/{x}/{y}.png', {
        maxZoom: 18,
        attribution: 'Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, '+
            'Baselayer © <a href="http://mapbox.com">Mapbox</a>',
        id: 'examples.map-20v6611k'
    }).addTo(map);


    function style(feature) {
        return {
            weight: 1,
            opacity: 1,
            color: 'white',
            fillOpacity: 0.7,
            fillColor: 'grey'
        };
    };

    function highlightFeature(e) {
        var layer = e.target;

        layer.setStyle({
            weight: 5,
            color: '#FFF',
            dashArray: '',
            fillOpacity: 0.7
        });
    };

    function resetHighlight(e) {
        geojson.resetStyle(e.target);
    };

    function zoomToFeature(e) {
        map.fitBounds(e.target.getBounds());
    };

    var onEachFeature_LMA = function onEachFeature(feature, layer) {
            layer.on({
            mouseover: highlightFeature,
            mouseout: resetHighlight,
            click: zoomToFeature
        });

        var div = $('<div class="popupGraph" style="width: 300px; height:200px;"><svg/></div>')[0];

        var popup = L.popup().setContent(div);
        layer.bindPopup(popup);

        var width = 500;
        var height = 300;

        var svg = d3.select(div)
        .select("svg")
        .attr("width", width)
        .attr("height", height)
        .append("rect")
        .attr("width", 300)
        .attr("height", 150)
        .style("fill", "steelblue");

    }


    var geojson = L.geoJson(Sample, {
        style: style,
        onEachFeature: onEachFeature_LMA
    }).addTo(map);

Answer 1

我刚刚更新了您的fiddle。

获得包含数据的条形图的关键是，在您的onEachFeature 函数中，您的数据位于feature.properties 中。通过以下内容，我准备了条形图的数据：

var values = feature.properties;
var data = [
  {name:"Educ", value:values["Educ"]},
  {name:"Earnings", value:values["Earnings"]},
  {name:"Ind", value:values["Ind"]},
  {name:"Housing", value:values["Housing"]},
  {name:"AccToSer", value:values["AccToSer"]},
  {name:"EcPerfInd", value:values["EcPerfInd"]}
];

如果只有应该在图表中显示的属性，这可以得到改进。这样它就被硬编码为名称...

对于条形图，您必须为每个数据元素附加一个矩形。

var bar = svg.selectAll("g.bar")
    .data(data)
    .enter()
  .append("g")
    .attr("transform", function(d, i) { return "translate(0," + i * barHeight + ")"; });

bar.append("rect")
    .attr("width", function(d){return x(d.value);})
    .attr("height", barHeight - 1);

bar.append("text")
    .attr("x", function(d) { return x(d.value) - 3; })
    .attr("y", barHeight / 2)
    .attr("dy", ".35em")
    .text(function(d) { return d.name; });

我为每个元素添加了一个g，以便将rect 和text 定位在里面。

此示例基于mike bostocks let's make a bar chart。