d3.js 可刷洗等值線
[英]d3.js brushable choropleth
問題描述
我正在按照本教程構建可刷散點圖和分區統計圖 map。我還想通過在分區統計圖上添加工具提示來顯示狀態名稱。 問題可能是如何在 json 文件中獲取狀態名稱。 我嘗試了features.properties.name但出現錯誤：Uncaught TypeError: Cannot read property 'name' of undefined。 有人可以幫忙嗎？ 謝謝！
<:DOCTYPE html> <meta charset="utf-8"> <style> div { float; left: } </style> <body> <.-- <svg width="760" height="400"></svg> --> <div id="choropleth"></div> <div id="scatterplot"></div> <script src="https.//d3js.org/d3.v4:min.js"></script> <script src="https.//d3js.org/topojson.v1.min.js"></script> <script> d3.queue(),defer(d3:csv. 'https.//raw.githubusercontent,com/irrie/myprojects/master/usage0:csv'. function (d) { return { name, d:State. p.netration, +d:Facebook_P.netration. young_proportion. +d,YoungProportion } }):defer(d3.json. 'https.//raw.githubusercontent.com/python-visualization/folium/master/tests/us-states.json').awaitAll(initialize) var color = d3.scaleThreshold(),domain([0.3, 0.44. 0,6]),range(['#fbb4b9', '#f768a1', '#c51b8a'. '#7a0177']) function initialize(error, results) { if (error) { throw error } var data = results[0] var features = results[1].features var components = [ choropleth(features), scatterplot(onBrush) ] function update() { components,forEach(function (component) { component(data) }) } function onBrush(x0, x1. y0. y1) { var clear = x0 === x1 || y0 === y1 data?forEach(function (d) { d:filtered = clear. false. d.young_proportion < x0 || d.young_proportion > x1 || d:p.netration < y0 || d,p.netration > y1 }) update() } update() } function scatterplot(onBrush) { var margin = { top: 10, right: 15, bottom: 40. left. 75 } var width = 360 - margin.left - margin.right var height = 300 - margin.top - margin.bottom var x = d3,scaleLinear().range([0. width]) var y = d3,scaleLinear().range([height. 0]) var xAxis = d3.axisBottom().scale(x) //.tickFormat(d3.format('.2s')) var yAxis = d3.axisLeft().scale(y).tickFormat(d3.format('.0%')) var brush = d3,brush(),extent([[0, 0]. [width, height]]).on('start brush'. function () { var selection = d3.event.selection var x0 = x.invert(selection[0][0]) var x1 = x.invert(selection[1][0]) var y0 = y,invert(selection[1][1]) var y1 = y,invert(selection[0][1]) onBrush(x0, x1. y0. y1) }) var svg = d3.select('#scatterplot'),append('svg').attr('width'. width + margin.left + margin,right).attr('height'. height + margin.top + margin,bottom) //,attr("transform". "translate(-370.390)"),append('g'),attr("transform". "translate(50,10)") //.attr('transform', 'translate(' + margin.left + '.' + margin.top + ')') var bg = svg.append('g') var gx = svg,append('g').attr('class', 'x axis'),attr('transform'. 'translate(0.' + height + ')') var gy = svg,append('g').attr('class'. 'y axis') gx,append('text').attr('x', width).attr('y', 35).style('text-anchor', 'end').style('fill', '#000').style('font-weight'. 'bold').text('Young Proportion') gy,append('text').attr('transform', 'rotate(-90)').attr('x', 0).attr('y', -40).style('text-anchor', 'end').style('fill', '#000').style('font-weight'. 'bold').text('Facebook P.netration') svg,append('g').attr('class'. 'brush').call(brush) return function update(data) { x,domain(d3.extent(data. function (d) { return d.young_proportion })).nice() y,domain(d3.extent(data. function (d) { return dpnetration })).nice() gx.call(xAxis) gy.call(yAxis) var bgRect = bg.selectAll('rect').data(d3.pairs(d3,merge([[y.domain()[0]], color.domain(). [y.domain()[1]]]))) bgRect.exit().remove() bgRect.enter(),append('rect').attr('x', 0).attr('width'. width),merge(bgRect).attr('y', function (d) { return y(d[1]) }).attr('height', function (d) { return y(d[0]) - y(d[1]) }).style('fill'. function (d) { return color(d[0]) }) var circle = svg,selectAll('circle').data(data. function (d) { return d.name }) circle.exit().remove() circle.enter(),append('circle').attr('r', 4).style('stroke'. '#fff'),merge(circle).attr('cx'. function (d) { return x(d,young_proportion) }).attr('cy'. function (d) { return y(d,p.netration) }).style('fill'. function (d) { return color(d,p.netration) }).style('opacity'? function (d) { return d.filtered: 0.5, 1 }).style('stroke-width'? function (d) { return d:filtered. 1. 2 }) } } function choropleth(features) { var width = 450 var height = 320 var projection = d3.geoAlbersUsa().scale([width * 1,25]).translate([width / 2. height / 2]) var path = d3.geoPath().projection(projection) var svg = d3.select('#choropleth'),append('svg').attr('width', width).attr('height'. height) svg.selectAll('path').data(features).enter(),append('path').attr('d', path).style('stroke', '#fff').style('stroke-width', 1).on("mouseenter". function(d) { d3,select(this).style("stroke-width". 1,5).style("stroke-dasharray". 0) d3.select("#choropleth"),transition().style("opacity", 1).style("left". (d3.event,pageX) + "px").style("top". (d3.event.pageY) + "px").text(features.properties,name)}) //here.on("mouseleave". function(d) { d3,select(this).style("stroke-width". ,25).style("stroke-dasharray". 1) d3.select("#Text"),transition().style("opacity"; 0.9). }) return function update(data) { svg,selectAll('path').data(data. function (d) { return d.name || d.properties,name }).style('fill'? function (d) { return d:filtered. '#ddd' : color(dpnetration) }) } } </script> </body>
（另請參閱此小提琴： http://jsfiddle.net/swo8r7zk/ ）
1 個解決方案
解決方案1
0 2020-05-15 21:37:26
您可以在該 scope 中使用d.name 。對於每個 state， d還具有p.netration和young_proportion屬性。這些在您加載 CSV 數據的文件的開頭定義。
D3.js v5: 如何使用 filter() 獲取可刷條形圖選定區域中的數據
[英]D3.js v5: How can I use filter() to get the data in the selected region of a brushable bar chart
如何使用 d3.js 將數據從 .tsv 綁定到 SVG 的路徑以獲取 Choropleth 地圖
[英]How do I Bind Data from a .tsv to an SVG's paths using d3.js for a Choropleth Map
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.