标签未针对散点图D3js中的所有值生成

Question

我创建了一个散点图，该散点图从https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json提取Json数据，但一切正常，但标签未针对所有值生成

我的代码看起来像

 var url = "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/cyclist-data.json"; //Call CSV Data d3.json(url, function (error, data) { if (error) console.log("You Got Error Some Where !!!"); /* Check For Data console.log(data); console.log(data[0].Name); */ var fastestTime = 2210; data.forEach(function (finish) { //turn finishing time into seconds behind winner finish.behind = finish.Seconds - fastestTime; }); //Create Margin var margin = { top: 40, right: 20, bottom: 60, left: 60 }, width = 960 - margin.left - margin.right, height = 600 - margin.top - margin.bottom; /* define scale then followed by axis */ // define x and y scales // define x and y scales // Formatters for counts and times (converting numbers to Dates). var formatCount = d3.format(",.0f"), formatTime = d3.time.format("%H:%M"), formatMinutes = function (d) { return formatTime(new Date(2012, 0, 1, 0, d)); }; var xScale = d3.scale.linear(). domain([d3.max(data, function (d) { return d.behind+50; }), 0 ]). range([0, width]); var yScale = d3.scale.linear(). domain([0, d3.max(data, function (d) { return d.Place + 1; })]). range([0, height]); // define x axis and y axis var xAxis = d3.svg.axis(). scale(xScale). orient("bottom"). tickFormat(formatMinutes); var yAxis = d3.svg.axis(). scale(yScale). ticks(8). orient("left"); /* Create Tooltip */ var toolTip = d3.tip() .attr('class', 'd3-tip') .offset([-10, 0]) .html(function (d) { var tooltipHTML = "<span class = 'name'>" + d.Name + "</span><br/>" + d.Year + "<br/>" + d.Nationality; if (d.doping !== "") { tooltipHTML += "<br/>" + d.Doping; } else { tooltipHTML += "<br/>No doping allegations"; } return tooltipHTML; }); /* create svg element then append height and width and g which act as a container */ var svg = d3.select("body"). append("svg"). attr({ "width": width + margin.right + margin.left, "height": height + margin.top + margin.bottom }). append("g"). attr("transform", "translate(" + margin.left + "," + margin.right + ")"); //call toolTip svg.call(toolTip); // Draw xAxis svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + height + ")") .call(xAxis).append("text") .attr("x", 300) .attr("y", 35) .attr("dy", ".35em") .style("text-anchor", "middle") .text("Minutes Behind Fastest Time");; //Draw yAxis svg.append("g") .attr("class", "y axis") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("x", 0) .attr("y", -35) .attr("dy", ".35em") .style("text-anchor", "end") .text("Ranking"); /* create bar or bind data */ //bind data svg.selectAll("circle") .data(data) //enter data .enter(). append("circle") //update data .attr("class", "circle") .attr("cx", function (d) { return xScale(d.behind); }) .attr("cy", function (d) { return yScale(d.Place); }) .attr("r", 8) .attr("fill", function (d) { if (d.Doping == "") { return "green"; } return "red"; }) .on('mouseover', toolTip.show) .on('mouseout', toolTip.hide); // Creating labels svg.selectAll("text") .data(data) .enter() .append("text") .text(function (d) { return d.Name; }) .attr("x", function (d) { return xScale(d.behind - 5); }) .attr("y", function (d) { return yScale(d.Place - (-0.3)); }) .attr("font-family", "sans-serif") .attr("font-size", "11px") .attr("fill", "black"); }); 

 svg { margin-top:50px; margin-left: auto; margin-right: auto; display: block; background-color:antiquewhite; } body { font: 10px sans-serif; } .axis path, .axis line { fill: none; stroke: #000; shape-rendering: crispEdges; } .bar { fill: orange; } .bar:hover { fill: orangered ; } .d3-tip { line-height: 1; font-weight: bold; padding: 12px; background: rgba(0, 0, 0, 0.8); color: #fff; border-radius: 2px; } /* Creates a small triangle extender for the tooltip */ .d3-tip:after { box-sizing: border-box; display: inline; font-size: 10px; width: 100%; line-height: 1; color: rgba(0, 0, 0, 0.8); content: "\\25BC"; position: absolute; text-align: center; } /* Style northward tooltips differently */ .d3-tip.n:after { margin: -1px 0 0 0; top: 100%; left: 0; } /*Do Not Change*/ 

 <!DOCTYPE html> <html> <head> <title>ScatterPlot</title> <meta charset="utf-8" /> <link href="../Content/bootstrap-theme.min.css" rel="stylesheet" /> <link href="../Content/bootstrap.min.css" rel="stylesheet" /> <script src="../Scripts/d3/d3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.6.7/d3-tip.min.js"></script> <link href="demo.css" rel="stylesheet" /> </head> <body> <script src="../Scripts/jquery-2.2.1.min.js"></script> <script src="../Scripts/bootstrap.min.js"></script> <script src="demo.js"></script> </body> </html> 

我的小提琴链接

Answer 1

不使用：

svg.selectAll("text")

SVG中还有其他text节点（例如，在轴上），您正在选择真正不需要的东西。 而是使用一个类：

svg.selectAll(".label")
  .data(data)
  .enter()
  .append("text")
  .attr("class", "label")
  ...

更新小提琴 。