我是 JavaScript/D3 的新手，我正在嘗試根據我擁有的一些玩具資料撰寫一個相對簡單的可視化代碼，但無法弄清楚。這是玩具資料：
toy_data = {
'abstract' : ['a'],
'introduction' : ['b', 'c'],
'methods' : ['d', 'e', 'f'],
'findings' : ['g', 'h', 'i', 'j'],
'conclusion' : ['k', 'l', 'm', 'n', 'o']
}
我想撰寫一個函式，接收這樣格式的資料（或者在必要時以稍微不同的方式）并在 D3 中生成一個大致如下所示的可視化（我在 Altair 中使用類似的資料生成了這個圖）：
不同之處在于 x 軸標簽將對應于我的玩具資料中指定的術語，并且我將只有與每個關聯的鍵值對中的專案一樣多的圓圈（例如，1 個圓圈用于摘要，2 個用于介紹， 3 用于方法等）。最后，我還將添加額外的資料來控制圓的大小，如上圖所示，但目前我對一個可以接收這種形式的任何資料并至少生成一個帶有圓的原型的函式感到滿意相同的大小。
我覺得這在 D3 中應該是相當可行的，也許通過定義散點圖然后添加連接水平線，或者通過組合線圖和散點圖，但我不知道該怎么做。如果有人可以解釋并舉例說明如何實作這種行為，那將非常有幫助，因為我認為我可以以此為基礎來實作我想要的。
uj5u.com熱心網友回復：
這將使您入門，盡管我建議您重新處理資料。大多數 D3 模式都以陣列陣列或物件陣列開頭。包含各種長度陣列的物件將難以處理。
const toy_data = {
'abstract' : ['a'],
'introduction' : ['b', 'c'],
'methods' : ['d', 'e', 'f'],
'findings' : ['g', 'h', 'i', 'j'],
'conclusion' : ['k', 'l', 'm', 'n', 'o']
}
const margin = {top:10,left:90,bottom:25,right:10},
width = 480 - margin.top - margin.bottom,
height = 250 - margin.left - margin.right;
const svg = d3.select('#chart')
.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 ')')
let rows = Object.getOwnPropertyNames(toy_data)
let cols = [];
for(prop in toy_data) {
cols = cols.concat(toy_data[prop])
}
const x = d3.scaleBand()
.domain(cols)
.range([0,width])
const y = d3.scaleBand()
.domain(rows)
.range([0,height])
svg.append('g')
.call(d3.axisLeft(y))
svg.append('g')
.attr('transform','translate(0,' height ')')
.call(d3.axisBottom(x))
for(prop in toy_data) {
svg.selectAll(null)
.data(toy_data[prop])
.enter()
.append('circle')
.attr('cx', d => x(d) x.bandwidth()/2)
.attr('cy', y(prop) y.bandwidth()/2)
.attr('r', x.bandwidth()/4)
.style('fill','steelblue')
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/5.7.0/d3.min.js"></script>
<div id="chart"><div>更新：我不知道您的資料的限制，但嚴格從 D3 的角度來看，這將更容易使用：
const toy_data = {
'abstract' : ['a'],
'introduction' : ['b', 'c'],
'methods' : ['d', 'e', 'f'],
'findings' : ['g', 'h', 'i', 'j'],
'conclusion' : ['k', 'l', 'm', 'n', 'o']
}
let d3_data = [];
for(prop in toy_data) {
d3_data = d3_data.concat(toy_data[prop].map(d=> [prop, d]))
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/482532.html
標籤：javascript d3.js