javascript – 附加文本未在d3 v4中显示

前端之家收集整理的这篇文章主要介绍了javascript – 附加文本未在d3 v4中显示前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我试图将 parallel coordinates example“翻译”到d3 v4的新版本.我有一个这个javascript的工作示例(如果有人试图使用d3的v4并且新功能有问题,这也是一个很好的例子):
  1. var margin = {top: 30,right: 10,bottom: 10,left: 10},width = 600 - margin.left - margin.right,height = 200 - margin.top - margin.bottom;
  2.  
  3. var x = d3.scaleBand().rangeRound([0,width]).padding(1),y = {},dragging = {};
  4.  
  5.  
  6. var line = d3.line(),//axis = d3.axisLeft(x),background,foreground,extents;
  7.  
  8. var svg = d3.select("#body").append("svg")
  9. .attr("width",width + margin.left + margin.right)
  10. .attr("height",height + margin.top + margin.bottom)
  11. .append("g")
  12. .attr("transform","translate(" + margin.left + "," + margin.top + ")");
  13.  
  14. d3.csv("cars.csv",function(error,cars) {
  15. // Extract the list of dimensions and create a scale for each.
  16. //cars[0] contains the header elements,then for all elements in the header
  17. //different than "name" it creates and y axis in a dictionary by variable name
  18. x.domain(dimensions = d3.keys(cars[0]).filter(function(d) {
  19. if(d == "name") {
  20. return false;
  21. }
  22. return y[d] = d3.scaleLinear()
  23. .domain(d3.extent(cars,function(p) {
  24. return +p[d]; }))
  25. .range([height,0]);
  26. }));
  27.  
  28. extents = dimensions.map(function(p) { return [0,0]; });
  29.  
  30. // Add grey background lines for context.
  31. background = svg.append("g")
  32. .attr("class","background")
  33. .selectAll("path")
  34. .data(cars)
  35. .enter().append("path")
  36. .attr("d",path);
  37.  
  38. // Add blue foreground lines for focus.
  39. foreground = svg.append("g")
  40. .attr("class","foreground")
  41. .selectAll("path")
  42. .data(cars)
  43. .enter().append("path")
  44. .attr("d",path);
  45.  
  46. // Add a group element for each dimension.
  47. var g = svg.selectAll(".dimension")
  48. .data(dimensions)
  49. .enter().append("g")
  50. .attr("class","dimension")
  51. .attr("transform",function(d) { return "translate(" + x(d) + ")"; })
  52. .call(d3.drag()
  53. .subject(function(d) { return {x: x(d)}; })
  54. .on("start",function(d) {
  55. dragging[d] = x(d);
  56. background.attr("visibility","hidden");
  57. })
  58. .on("drag",function(d) {
  59. dragging[d] = Math.min(width,Math.max(0,d3.event.x));
  60. foreground.attr("d",path);
  61. dimensions.sort(function(a,b) { return position(a) - position(b); });
  62. x.domain(dimensions);
  63. g.attr("transform",function(d) { return "translate(" + position(d) + ")"; })
  64. })
  65. .on("end",function(d) {
  66. delete dragging[d];
  67. transition(d3.select(this)).attr("transform","translate(" + x(d) + ")");
  68. transition(foreground).attr("d",path);
  69. background
  70. .attr("d",path)
  71. .transition()
  72. .delay(500)
  73. .duration(0)
  74. .attr("visibility",null);
  75. }));
  76. // Add an axis and title.
  77. g.append("g")
  78. .attr("class","axis")
  79. .each(function(d) { d3.select(this).call(d3.axisLeft(y[d]));})
  80. //text does not show up because prevIoUs line breaks somehow
  81. .append("text")
  82. .style("text-anchor","middle")
  83. .attr("y",-9)
  84. .text(function(d) { return d; });
  85.  
  86. // Add and store a brush for each axis.
  87. g.append("g")
  88. .attr("class","brush")
  89. .each(function(d) {
  90. d3.select(this).call(y[d].brush = d3.brushY().extent([[-8,0],[8,height]]).on("brush start",brushstart).on("brush",brush_parallel_chart));
  91. })
  92. .selectAll("rect")
  93. .attr("x",-8)
  94. .attr("width",16);
  95. });
  96.  
  97. function position(d) {
  98. var v = dragging[d];
  99. return v == null ? x(d) : v;
  100. }
  101.  
  102. function transition(g) {
  103. return g.transition().duration(500);
  104. }
  105.  
  106. // Returns the path for a given data point.
  107. function path(d) {
  108. return line(dimensions.map(function(p) { return [position(p),y[p](d[p])]; }));
  109. }
  110.  
  111. function brushstart() {
  112. d3.event.sourceEvent.stopPropagation();
  113. }
  114.  
  115.  
  116. // Handles a brush event,toggling the display of foreground lines.
  117. function brush_parallel_chart() {
  118. for(var i=0;i<dimensions.length;++i){
  119. if(d3.event.target==y[dimensions[i]].brush) {
  120. extents[i]=d3.event.selection.map(y[dimensions[i]].invert,y[dimensions[i]]);
  121.  
  122. }
  123. }
  124.  
  125. foreground.style("display",function(d) {
  126. return dimensions.every(function(p,i) {
  127. if(extents[i][0]==0 && extents[i][0]==0) {
  128. return true;
  129. }
  130. return extents[i][1] <= d[p] && d[p] <= extents[i][0];
  131. }) ? null : "none";
  132. });
  133. }

一切正常(刷在每个轴上,改变轴的顺序……),除了每个轴顶部的标签没有显示,即使附加了文本标签并且文本写在tag(可以通过使用浏览器检查生成的html来检查).我相信负责这个的代码就是这个部分,但我无法找到发生这种情况的原因:

  1. g.append("g")
  2. .attr("class",-9)
  3. .text(function(d) { return d; });

为什么文本标签不显示

解决方法@H_502_12@
在D3 v4中,轴组件将在其所要求的选择上明确地将填充设置为无.从 source code
  1. selection.filter(entering)
  2. .attr("fill","none") // <=== Fill set to none by D3
  3. .attr("font-size",10)
  4. .attr("font-family","sans-serif")
  5. .attr("text-anchor",orient === right ? "start" : orient === left ? "end" : "middle");

这将创建以下代码

与v3生成代码形成对比:

< text>元素将继承这些属性,因为它们是这些组的子元素,从而隐藏文本.

显示您需要明确设置标签标签,可以这样做

>通过CSS:

  1. .axis text {
  2. fill:black; /* <== Set the fill */
  3. text-shadow: 0 1px 0 #fff,1px 0 0 #fff,0 -1px 0 #fff,-1px 0 0 #fff;
  4. cursor: move;
  5. }

工作demo.
>通过在< text>上设置fill属性元素本身:

  1. .append("text")
  2. .attr("fill","black") // <=== Set the fill
  3. // .style("fill","black") // Will also work when using .style()
  4. .style("text-anchor","middle")
  5. .attr("y",-9)
  6. .text(function(d) { return d; });

工作demo.

猜你在找的JavaScript相关文章