【问题标题】:How do I access values in a d3 json file with nested array objects如何使用嵌套数组对象访问 d3 json 文件中的值
【发布时间】:2014-01-15 11:16:51
【问题描述】:

之前我使用的是以下格式的 json 文件:

[{"lat":43.788458853157117,"lng":-79.282781549043008,"category":"volunteer","name":"Rita","url":"", "description":"xxx is a member of 13"},{"lat":43.7,"lng":-79.4,"category":"organization","name":"TCAN","url":"http://tcan.ca","description":"Lorem ipsum"}]

现在我正在尝试从 Drupal 站点生成 json 文件并获得以下结构。如何引用最低级别的字段。我查看了使用 d3.net 的示例,但没有找到任何适用的示例。

{
    "organizations": [
        {
            "member": {
                "field_category": "organization",
                "body": "A network of organizations in Toronto devoted to climate change mitigation and adaptation.",
                "URL": "xxx.ca",
                "title": "Toronto Climate Action Network",
                "field_lat": 43.7,
                "field_long": -79.4
            }
        },
        {
            "member": {
                "field_category": "abc",
                "body": "xxx.",
                "URL": "",
                "title": "yyy",
                "field_lat": 43.7,
                "field_long": -79.28
            }
        }
    ]
}

【问题讨论】:

    标签: javascript arrays json d3.js


    【解决方案1】:

    假设你的数据存储在变量data中:

    var bottom = data.organizations.map(function(d) { return d.member; });
    

    【讨论】:

    • 我正在使用以下代码来访问 json 文件 - 这将如何适应? d3.json("d3_files/json/members4.json",function(error,data){ circles.selectAll("circle") .data(data) .enter() .append("image") .attr("xlink :href", function(data) { return lookupTable[data.category](); }) // 结束属性 .attr("width", 64) // 图像尺寸 .attr("height", 64) .attr ("transform",function(data){ return"translate("+projection([data.lng,data.lat])+")" }) // 结束变换属性
    • 特别是如何引用“body”字段?
    • 您将在转换后的 D3 代码中使用 bottom 而不是 data。要引用body 字段,您可以使用d3.selectAll("text").data(bottom).enter().append("text").text(function(d) { return d.body; }) 之类的内容。
    • 拉斯,非常感谢。这真的帮助了我,我得到了它的工作。显然我仍然缺少一些基础知识。
    猜你喜欢
    • 2018-04-05
    • 1970-01-01
    • 1970-01-01
    • 2015-08-13
    • 2017-11-27
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多