相关疑难解决方法(0)

从一串JSON而不是JSON文件渲染D3图

我试图从我的Rails应用程序渲染以下树形图:http: //bl.ocks.org/mbostock/4063570

我有一个具有许多属性的模型,但我想手动嵌套这些属性,只需使用字符串插值来构建我自己的JSON字符串,然后直接将其传递给d3.

这是我的代码:

    <%= javascript_tag do %>
        var width = 960,
        height = 2200;

        var cluster = d3.layout.cluster()
        .size([height, width - 160]);

        var diagonal = d3.svg.diagonal()
        .projection(function(d) { return [d.y, d.x]; });

        var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(40,0)");

        **d3.json("/assets/flare.json", function(root) {**
        var nodes = cluster.nodes(root),
        links = cluster.links(nodes);

        var link = svg.selectAll(".link")
        .data(links)
        .enter().append("path")
        .attr("class", "link")
        .attr("d", diagonal);

        var node = svg.selectAll(".node")
        .data(nodes)
        .enter().append("g")
        .attr("class", "node")
        .attr("transform", function(d) { return "translate(" + …

Run Code Online (Sandbox Code Playgroud)

json d3.js

Qui*_*son

2018 07-04

14
推荐指数

1
解决办法

2万
查看次数

转换d3图表以从变量内的json加载数据

我正在尝试使用d3创建一个条形图,为此我遵循本教程d3noob图表,一切看起来都不错但我无法从变量中加载JSON而不是从JSON文件加载,我已经设法将json加载到var但我不知道如何迭代数据并创建条形图.代码:

    <!DOCTYPE html>
<meta charset="utf-8">

<head>
    <style>

        .axis {
            font: 10px sans-serif;
        }

        .axis path,
        .axis line {
            fill: none;
            stroke: #000;
            shape-rendering: crispEdges;
        }

    </style>
</head>

<body>

    <script src="http://d3js.org/d3.v3.min.js"></script>

    <script>



        var jdata =  [
        {
            "date": "2013-01",
            "value": "53"
        },
        {
            "date": "2013-02",
            "value": "165"
        },
        {
            "date": "2013-03",
            "value": "269"
        },
        {
            "date": "2013-04",
            "value": "344"
        },
        {
            "date": "2013-05",
            "value": "376"
        },
        {
            "date": "2013-06",
            "value": "410"
        },
        {
            "date": "2013-07",
            "value": "421"
        },
        { …

Run Code Online (Sandbox Code Playgroud)

javascript json loaddata bar-chart d3.js

Big*_*guá

2017 08-20

5
推荐指数

1
解决办法

6759
查看次数