如何從外部JSON文件製作D3中給定位置的圓圈？

-2

如何使用JSON數據製作給定「x」和「y」值的圓圈並用網站名稱標註圓圈？此外，圓的半徑應該等於給定的數量。 JSON文件看起來像這樣如何從外部JSON文件製作D3中給定位置的圓圈？

{

「節點」：

{ 「ID」：「site01」，「X」：317.5，「Y」：282.5 }，

{ 「ID」：「site02」，「×」：112，「Y」：47 }，

{ 「ID」：「site03」，「×」：69.5，「Y」：287 }，

{ 「ID」：「site04」，「×」：424.5，「Y 「：99.5 }，

{ 「ID」：「site05」，「×」：432，「Y」：467 }，

{ 「ID」：「site06」，「x」：567，「Y」：482 }，

{ 「ID」：「site07」，「×」：592，「Y」：164.5 }，

{ 「ID」：「 site08" ，「×」：782，「Y」：397 }，

{ 「ID」：「site09」，「×」：829.5，「Y」：262 }，

{ 「ID」：「site10」，「×」：902，「Y」：169.5}

]，

「鏈接」：[

{"node01": "site01", "node02": "site08", "amount": 170}, 
{"node01": "site01", "node02": "site02", "amount": 100}, 
{"node01": "site01", "node02": "site03", "amount": 70}, 
{"node01": "site01", "node02": "site07", "amount": 50}, 
{"node01": "site01", "node02": "site09", "amount": 220}, 
{"node01": "site01", "node02": "site10", "amount": 350}, 

{"node01": "site02", "node02": "site03", "amount": 1000}, 
{"node01": "site02", "node02": "site04", "amount": 50}, 
{"node01": "site02", "node02": "site05", "amount": 60}, 
{"node01": "site02", "node02": "site08", "amount": 70}, 
{"node01": "site02", "node02": "site09", "amount": 80}, 

{"node01": "site03", "node02": "site06", "amount": 120}, 
{"node01": "site03", "node02": "site07", "amount": 130}, 
{"node01": "site03", "node02": "site09", "amount": 110}, 
{"node01": "site03", "node02": "site10", "amount": 120}, 
{"node01": "site03", "node02": "site04", "amount": 140}, 

{"node01": "site04", "node02": "site01", "amount": 50}, 
{"node01": "site04", "node02": "site05", "amount": 200}, 
{"node01": "site04", "node02": "site07", "amount": 210}, 
{"node01": "site04", "node02": "site09", "amount": 220}, 
{"node01": "site04", "node02": "site10", "amount": 190}, 

{"node01": "site05", "node02": "site06", "amount": 170}, 
{"node01": "site05", "node02": "site07", "amount": 150}, 
{"node01": "site05", "node02": "site08", "amount": 160}, 
{"node01": "site05", "node02": "site09", "amount": 130}, 
{"node01": "site05", "node02": "site10", "amount": 140}, 

{"node01": "site06", "node02": "site02", "amount": 800}, 
{"node01": "site06", "node02": "site07", "amount": 760}, 
{"node01": "site06", "node02": "site04", "amount": 780}, 
{"node01": "site06", "node02": "site09", "amount": 50}, 
{"node01": "site06", "node02": "site10", "amount": 80}

] }

來源

2017-05-13 Laksh

你有什麼嘗試嗎？你有沒有在網上搜索例子？你現在的問題就是這樣：*「嘿，我有這些數據，我希望你們可以寫一個代碼，用這些規範創建一個圖表，免費」*。堆棧溢出不是免費的代碼寫入服務。我正在投票結束這個問題*「有問題要求我們推薦一個教程」*。 –

我現在做的是製作一個條形圖，但沒有，最終顯示正確。這是代碼 – Laksh

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

<head> 
    <style> 

    .bar{ 
    fill: steelblue; 
    } 

    .bar:hover{ 
    fill: brown; 
    } 

    .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> 
// set the dimensions of the canvas 
    var margin = {top: 20, right: 20, bottom: 70, left: 40}, 
    width = 600 - margin.left - margin.right, 
    height = 300 - margin.top - margin.bottom; 


// set the ranges 
    var x = d3.scale.ordinal().rangeRoundBands([0, width], .05); 

    var y = d3.scale.linear().range([height, 0]); 

// define the axis 
    var xAxis = d3.svg.axis() 
    .scale(x) 
    .orient("bottom") 


    var yAxis = d3.svg.axis() 
    .scale(y) 
    .orient("left") 
    .ticks(10); 


// add the SVG element 
    var svg = d3.select("body").append("svg") 
    .attr("width", width + margin.left + margin.right) 
    .attr("height", height + margin.top + margin.bottom) 
    .append("g") 
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); 


// load the data 
    d3.json("/Volumes/Macintosh%20HD/Users/Lakshya/Downloads/data.json", function(error, data) { 

     data.forEach(function(d) { 
     d.id = d.id; 
     d.x = +d.x; 
    }); 

    // scale the range of the data 
    x.domain(data.map(function(d) { return d.id; })); 
    y.domain([0, d3.max(data, function(d) { return d.x; })]); 

    // add axis 
    svg.append("g") 
     .attr("class", "x axis") 
     .attr("transform", "translate(0," + height + ")") 
     .call(xAxis) 
     .selectAll("text") 
     .style("text-anchor", "end") 
     .attr("dx", "-.8em") 
     .attr("dy", "-.55em") 
     .attr("transform", "rotate(-90)"); 

    svg.append("g") 
     .attr("class", "y axis") 
     .call(yAxis) 
     .append("text") 
     .attr("transform", "rotate(-90)") 
     .attr("y", 5) 
     .attr("dy", ".71em") 
     .style("text-anchor", "end") 
     .text("x"); 


    // Add bar chart 
    svg.selectAll("bar") 
     .data(data) 
     .enter().append("rect") 
     .attr("class", "bar") 
     .attr("x", function(d) { return x(d.id); }) 
     .attr("width", x.rangeBand()) 
     .attr("y", function(d) { return y(d.x); }) 
     .attr("height", function(d) { return height - y(d.x); }); 

}); 

</script> 

</body>

來源

2017-05-14 03:08:45 Laksh

如何從外部JSON文件製作D3中給定位置的圓圈？

回答

相關問題