Javascript 如何在散点图中的点内添加标签？

我试图在散点图中添加州缩写，如下所示：

下面是我正在处理的CSV文件的一个片段：

id   abbr healthcare  poverty
 1   AL   13.9        19.3
 2   AK   15          11.2      
 3   AZ   14.4        18.2
 4   AR   16.3        18.9
 5   CA   14.8        16.4
 6   CO   12.8        12
 7   CT   8.7         10.8
 8   DE   8.7         12.5

以下是我的JavaScript代码：

// @TODO: YOUR CODE HERE!
var svgWidth = 750;
var svgHeight = 500;

var margin = {
    top: 20,
    right: 40,
    bottom: 60, 
    left: 100
};

var width = svgWidth - margin.left - margin.right;
var height = svgHeight - margin.top - margin.bottom;

// Create an SVG wrapper, append an SVG group that will hold our chart and shift the latter by left and top margins
var svg = d3.select("#scatter")
  .append("svg")
  .attr("width", svgWidth)
  .attr("height", svgHeight);

var chartGroup = svg.append("g")
  .attr("transform", `translate(${margin.left}, ${margin.top})`);

// Import Data
d3.csv("data.csv").then(function(censusData) {

    // Parse Data & Cast as numbers
    censusData.forEach(function(data) {
        data.healthcare = +data.healthcare;
        data.poverty = +data.poverty;
    });

    // Create scale functions
    var xLinearScale = d3.scaleLinear()
      .domain(d3.extent(censusData, d => d.poverty))
      .range([0, width]);

    var yLinearScale = d3.scaleLinear()
      .domain([0, d3.max(censusData, d => d.healthcare)])
      .range([height, 0]);

    // Create axis functions
    var bottomAxis = d3.axisBottom(xLinearScale);
    var leftAxis = d3.axisLeft(yLinearScale);

    // Append axes to the chart
    chartGroup.append("g")
      .attr("transform", `translate(0, ${height})`)
      .call(bottomAxis);

    chartGroup.append("g")
      .call(leftAxis);

    // Create circles
    var circlesGroup = chartGroup.selectAll("Circle")
      .data(censusData)
      .enter()
      .append("circle")
      .attr("cx", d => xLinearScale(d.poverty))
      .attr("cy", d => yLinearScale(d.healthcare))
      .attr("r", "15")
      .attr("fill", "rgb(117, 145, 197)") 
      .attr("opacity", "0.5");

    // Add state labels to the points
    var circleLabels = circlesGroup.selectAll("text").data(censusData).enter().append("text");

    circleLabels
      .attr("x", function(d) { return d.poverty; })
      .attr("y", function(d) { return d.healthcare; })
      .text(function(d) { return d.abbr; })
      .attr("font-family", "sans-serif")
      .attr("font-size", "5px")
      .attr("fill", "white");

    // Create axes labels
    chartGroup.append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 0 - margin.left + 40)
      .attr("x", 0 - (height / 2))
      .attr("dy", "1em")
      .attr("class", "axisText")
      .style("text-anchor", "middle")
      .text("Lacks Healthcare (%)");

    chartGroup.append("text")
      .attr("transform", `translate(${width / 2}, ${height + margin.top + 30})`)
      .attr("class", "axisText")
      .style("text-anchor", "middle")
      .text("In Poverty (%)");

    // Initialize tooltip
    var toolTip = d3.tip() 
      .attr("class", "tooltip")
      .offset([80, -60])
      .html(function(d) {
        return  `${d.state}<br>Poverty: ${d.poverty}<br>Healthcare: ${d.healthcare}<br>`; 
    });

    // Create tooltip in the chart
    chartGroup.call(toolTip);

    // Create event listeners to display and hide the tooltip
    circlesGroup.on("mouseover", function(data) {
      toolTip.show(data, this);
    })
      // onmouseout event
      .on("mouseout", function(data, index) {
        toolTip.hide(data);
      });

});

---

欢迎提出任何建议或修改

您有三个问题：

circlesGroup

是一个圆圈的选择。不能将

元素附加到

元素。因此，将其更改为

chartGroup

：

var circleLabels = chartGroup.selectAll("text")//etc...

这就引出了第二个问题：

该选择中有文本元素。因此，为了避免将数据绑定到现有元素（这会减少enter选择的大小），请使用

selectAll（null

：

var circleLabels = chartGroup.selectAll(null)//etc...

要了解有关

选择全部（空）

的更多信息，请在此处阅读我的Q/A对：

您没有使用刻度来定位文本

最后，使用

文本锚定：middle

输入文本

以下是您的代码和这些更改：

var csv=`id，缩写，医疗保健，贫困
1，AL，13.9,19.3
2，AK，15,11.2，
3，亚利桑那州，14.4,18.2
4，AR，16.3,18.9
5，CA，14.8,16.4
6，CO，12.8,12
7，CT，8.7,10.8
8，DE，8.7,12.5`；
const censusData=d3.csvParse（csv）
var svgWidth=960；
var svgHeight=500；
var保证金={
前20名，
右:40,，
底数：60，
左：100
};
var width=svgWidth-margin.left-margin.right；
变量高度=SVGHIGHT-margin.top-margin.bottom；
//创建一个SVG包装器，附加一个SVG组来保存我们的图表，并将后者向左和向上移动
var svg=d3。选择（“分散”）
.append（“svg”）
.attr（“宽度”，svgWidth）
.attr（“高度”，svgHeight）；
var chartGroup=svg.append（“g”）
.attr（“transform”，`translate（${margin.left}，${margin.top}）`）；
//解析数据&转换为数字
censusData.forEach（函数（数据）{
data.healthcare=+data.healthcare；
data.poverty=+data.poverty；
});
//创建比例函数
var xLinearScale=d3.scaleLinear（）
.域（d3.范围（censusData，d=>d.poverty））
.范围（[0，宽度]）；
var yLinearScale=d3.scaleLinear（）
.domain（[0，d3.max（censusData，d=>d.healthcare）]）
.范围（[高度，0]）；
//创建轴函数
var bottomAxis=d3.axisBottom（xLinearScale）；
var leftAxis=d3.axisLeft（yLinearScale）；
//将轴附加到图表中
chartGroup.append（“g”）
.attr（“transform”，`translate（0，${height}）`）
.呼叫（下轴）；
chartGroup.append（“g”）
.呼叫（左轴）；
//创建圆圈
var circlesGroup=chartGroup.selectAll（“圆圈”）
.数据（普查数据）
.输入（）
.附加（“圆圈”）
.attr（“cx”，d=>xLinearScale（d.poverty））
.attr（“cy”，d=>yLinearScale（d.healthcare））
.attr（“r”、“15”）
.attr（“填充”、“蓝色”）
.attr（“不透明度”，“0.5”）；
var circleLabels=chartGroup.selectAll（null）.data（censusData.enter（）.append（“文本”）；
圈标
.attr（“x”，函数（d）{
返回xLinearScale（d.贫困）；
})
.attr（“y”，函数（d）{
回归量表（d.healthcare）；
})
.文本（功能（d）{
返回d.abbr；
})
.attr（“字体系列”、“无衬线”）
.attr（“字体大小”，“10px”）
.attr（“文本锚定”、“中间”）
.attr（“填充”、“白色”）；
//创建轴标签
chartGroup.append（“文本”）
.attr（“变换”、“旋转（-90）”）
.attr（“y”，0-边距左+40）
.attr（“x”，0-（高度/2））
.attr（“dy”、“1em”）
.attr（“类”、“文本”）
.text（“缺乏医疗保健（%）”；
chartGroup.append（“文本”）
.attr（“transform”，`translate（${width/2}，${height+margin.top+30}）`）
.attr（“类”、“文本”）
.text（“贫困（%）”；

第三次
第三次
编码训练营©；2016

var circleLabels = chartGroup.selectAll(null)//etc...