d3.js:csv

table:data

name value

サービス 33.7

ソフトウェア 22.7

コネクティビティ 9.7

ハードウェア 29.2

その他 .9

code:test.css

.arc text {

font: 10px sans-serif;

text-anchor: middle;

}

.arc path {

}

接続テスト（data.csvが読み込めるか確認）

code:testx.js

.then((data)=>{

console.log(data)

})

テスト2 CSVファイルをHTMLのテーブルに変換する

code:test2.js

.then((data)=>{

console.log(data)

const table = d3.select("body")

.append("table")

.attr("border", "1") // 枠線表示

table.append("thead")

.append("tr")

.selectAll("th")

.data(names)

.enter()

.append("th")

.text( d => d)

table.append("tbody")

.selectAll("tr")

.data(data)

.enter()

.append("tr")

.selectAll("td")

.data(row => d3.entries(row))

.enter()

.append("td")

.text(d => d.value)

})

テスト3 円グラフを描いてみる（CSVファイルは使わない）

元ネタ

code:test3.js

var dataset = [

{ "name": "サービス", "value": 33.7},

{ "name": "ソフトウェア", "value": 22.7 },

{ "name": "コネクティビティ", "value": 9.7 },

{ "name": "ハードウェア", "value": 29.2 }

]

var width = 600; // グラフの幅

var height = 400; // グラフの高さ

var radius = Math.min(width, height) / 2 - 10; // 円の半径

// SVG設定

var svg = d3.select("body").append("svg").attr("width", width).attr("height", height);

g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")");

// カラー設定

var color = d3.scaleOrdinal()

// 円グラフ関数

var pie = d3.pie()

.value(function(d) { return d.value; })

.sort(null);

// 円グラフへのデータ設定

var pieChart = g.selectAll(".pie")

.data(pie(dataset))

.enter()

.append("g")

.attr("class", "pie");

arc = d3.arc()

.outerRadius(radius)

.innerRadius(0);

pieChart.append("path")

.attr("d", arc)

.attr("fill", function(d) { return color(d.index) })

.attr("opacity", 0.8)

// 円グラフにテキスト追加

var text = d3.arc()

.outerRadius(radius - 60)

.innerRadius(radius - 60);

pieChart.append("text")

.attr("fill", "black")

.attr("transform", function(d) { return "translate(" + text.centroid(d) + ")"; })

.attr("dy", "5px")

.attr("text-anchor", "middle")

.text(function(d) { return d.data.name; });

実行

code:test.js

async function load() {

return res

}

CSVファイル読み込み

code:test.js

const dataset = load()

dataset.then((data)=> {

console.log(data)

const width = 600 // グラフの幅

const height = 400 // グラフの高さ

const radius = Math.min(width, height) / 2 - 10 // 円の半径

// SVG設定

const svg = d3.select("body").append("svg").attr("width", width).attr("height", height)

const g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

// カラー設定

const color = d3.scaleOrdinal()

// 円グラフ関数

const pie = d3.pie()

.value((d)=> d.value)

.sort(null);

// 円グラフへのデータ設定

const pieChart = g.selectAll(".pie")

.data(pie(data))

.enter()

.append("g")

.attr("class", "pie")

const arc = d3.arc()

.outerRadius(radius)

.innerRadius(0)

pieChart.append("path")

.attr("d", arc)

.attr("fill", (d) => color(d.index))

.attr("opacity", 0.8)

code:test.js

// 円グラフにテキスト追加

const text = d3.arc()

.outerRadius(radius - 60)

.innerRadius(radius - 60)

pieChart.append("text")

.attr("fill", "black")

.attr("transform", (d) => "translate(" + text.centroid(d) + ")")

.attr("dy", "5px")

.attr("text-anchor", "middle")

.text((d)=> d.data.name)

// clickイベントを設定

d3.selectAll("path").on("click",function(data,idx,elem){

console.log(data)

const msg = "data:" + data.value +

"\nidx:" + idx + "\nelem:" + elem +

"\nd3.event.pageX: " + d3.event.pageX + "\nd3.mouse: " + d3.mouse(this)

alert(msg)

})

})

実行

テスト1 接続テスト（data.csvが読み込めるか確認）

code:d3scriptxx1.js

.then((data)=>{

console.log(data)

})

テスト2 CSVファイルをHTMLのテーブルに変換する（うまくいかない）

code:d3scriptxx2.js

.then((data)=>{

console.log(data)

const table = d3.select("body")

.append("table")

.attr("border", "1") // 枠線表示

table.append("thead")

.append("tr")

.selectAll("th")

.data(names)

.enter()

.append("th")

.text( d => d)

table.append("tbody")

.selectAll("tr")

.data(data)

.enter()

.append("tr")

.selectAll("td")

.data(row => d3.entries(row))

.enter()

.append("td")

.text(d => d.value)

})

code:d3script.js

async function load() {

return res

}

const dataset = load()

dataset.then((data)=> {

console.log(data)

const width = 600 // グラフの幅

const height = 400 // グラフの高さ

const radius = Math.min(width, height) / 2 - 10 // 円の半径

// SVG設定

const svg = d3.select("body").append("svg").attr("width", width).attr("height", height)

const g = svg.append("g").attr("transform", "translate(" + width / 2 + "," + height / 2 + ")")

// カラー設定

const color = d3.scaleOrdinal()

// 円グラフ関数

const pie = d3.pie()

.value((d)=> d.value)

.sort(null);

// 円グラフへのデータ設定

const pieChart = g.selectAll(".pie")

.data(pie(data))

.enter()

.append("g")

.attr("class", "pie")

const arc = d3.arc()

.outerRadius(radius)

.innerRadius(0)

pieChart.append("path")

.attr("d", arc)

.attr("fill", (d) => color(d.index))

.attr("opacity", 0.8)

// 円グラフにテキスト追加

const text = d3.arc()

.outerRadius(radius - 60)

.innerRadius(radius - 60)

pieChart.append("text")

.attr("fill", "black")

.attr("transform", (d) => "translate(" + text.centroid(d) + ")")

.attr("dy", "5px")

.attr("text-anchor", "middle")

.text((d)=> d.data.name)

// clickイベントを設定

d3.selectAll("path").on("click",function(data,idx,elem){

console.log(data)

const msg = "data:" + data.value +

"\nidx:" + idx + "\nelem:" + elem +

"\nd3.event.pageX: " + d3.event.pageX + "\nd3.mouse: " + d3.mouse(this)

alert(msg)

})

})

https://img.shields.io/badge/D3.js-csv-F9A03C.svg?logo=D3.js&style=for-the-badge