d3.select(“#element”)当代码位于html元素之上时不工作

c90pui9n  于 2024-01-08  发布在  其他
关注(0)|答案(7)|浏览(224)

这是有效的:

  1. <div id="chart"></div>
  2. <script>var svg = d3.select("#chart").append("svg:svg");</script>

字符串
这并不:

  1. <script>var svg = d3.select("#chart").append("svg:svg");</script>
  2. <div id="chart"></div>


我尝试将代码 Package 在jquery document.ready()中,用jquery抓取元素,并将其传递到d3.select,但这也不起作用。Edit一旦我掌握了jquery document.ready()语法,它就起作用了。
我可以在页面顶部包含JavaScript,但仍然选择下面的元素吗?谢谢。

bqf10yzr

bqf10yzr1#

  1. <script>$(function(){var svg = d3.select("#chart").append("svg:svg");});</script>
  2. <div id="chart"></div>

字符串
换句话说,这不会发生,因为你不能查询还不存在的东西--所以在页面加载后再做(这里通过jquery)。
顺便说一句,建议您将JS文件放在body标签关闭之前。

yuvru6vn

yuvru6vn2#

没有足够的声誉来评论,所以我只把它放在这里:
为了扩展Micah的答案-浏览器从上到下运行您的代码,所以如果您编写:

  1. <div id="chart"></div>
  2. <script>var svg = d3.select("#chart").append("svg:svg");</script>

字符串
浏览器将创建一个id为“chart”的div,然后运行你的脚本,它将尝试找到那个div,然后,万岁,成功了。
否则,如果你写:

  1. <script>var svg = d3.select("#chart").append("svg:svg");</script>
  2. <div id="chart"></div>


浏览器运行你的脚本,并试图找到一个div与id图表,但它还没有被创建,所以它失败了。
然后浏览器创建一个id为“chart”的div。

展开查看全部
mlmc2os5

mlmc2os53#

使用jQuery $(document)函数.

  1. $(document).ready(function(){
  2. var margin = {top: 20, right: 20, bottom: 30, left: 40},
  3. width = 960 - margin.left - margin.right,
  4. height = 500 - margin.top - margin.bottom;
  5. var x0 = d3.scale.ordinal()
  6. .rangeRoundBands([0, width], .1);
  7. var x1 = d3.scale.ordinal();
  8. var y = d3.scale.linear()
  9. .range([height, 0]);
  10. var color = d3.scale.ordinal()
  11. .range(["#98abc5", "#8a89a6", "#7b6888", "#6b486b", "#a05d56", "#d0743c", "#ff8c00"]);
  12. var xAxis = d3.svg.axis()
  13. .scale(x0)
  14. .orient("bottom");
  15. var yAxis = d3.svg.axis()
  16. .scale(y)
  17. .orient("left")
  18. .tickFormat(d3.format(".2s"));
  19. //d3.select('#chart svg')
  20. //d3.select("body").append("svg")
  21. //var svg = d3.select("#chart").append("svg:svg");
  22. var svg = d3.select("#BarChart").append("svg:svg")
  23. .attr("width", width + margin.left + margin.right)
  24. .attr("height", height + margin.top + margin.bottom)
  25. .append("g")
  26. .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  27. var updateData = function(getData){
  28. d3.selectAll('svg > g > *').remove();
  29. d3.csv(getData, function(error, data) {
  30. if (error) throw error;
  31. var ageNames = d3.keys(data[0]).filter(function(key) { return key !== "State"; });
  32. data.forEach(function(d) {
  33. d.ages = ageNames.map(function(name) { return {name: name, value: +d[name]}; });
  34. });
  35. x0.domain(data.map(function(d) { return d.State; }));
  36. x1.domain(ageNames).rangeRoundBands([0, x0.rangeBand()]);
  37. y.domain([0, d3.max(data, function(d) { return d3.max(d.ages, function(d) { return d.value; }); })]);
  38. svg.append("g")
  39. .attr("class", "x axis")
  40. .attr("transform", "translate(0," + height + ")")
  41. .call(xAxis);
  42. svg.append("g")
  43. .attr("class", "y axis")
  44. .call(yAxis)
  45. .append("text")
  46. .attr("transform", "rotate(-90)")
  47. .attr("y", 6)
  48. .attr("dy", ".71em")
  49. .style("text-anchor", "end")
  50. .text("Population");
  51. var state = svg.selectAll(".state")
  52. .data(data)
  53. .enter().append("g")
  54. .attr("class", "state")
  55. .attr("transform", function(d) { return "translate(" + x0(d.State) + ",0)"; });
  56. state.selectAll("rect")
  57. .data(function(d) { return d.ages; })
  58. .enter().append("rect")
  59. .attr("width", x1.rangeBand())
  60. .attr("x", function(d) { return x1(d.name); })
  61. .attr("y", function(d) { return y(d.value); })
  62. .attr("height", function(d) { return height - y(d.value); })
  63. .style("fill", function(d) { return color(d.name); });
  64. var legend = svg.selectAll(".legend")
  65. .data(ageNames.slice().reverse())
  66. .enter().append("g")
  67. .attr("class", "legend")
  68. .attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; });
  69. legend.append("rect")
  70. .attr("x", width - 18)
  71. .attr("width", 18)
  72. .attr("height", 18)
  73. .style("fill", color);
  74. legend.append("text")
  75. .attr("x", width - 24)
  76. .attr("y", 9)
  77. .attr("dy", ".35em")
  78. .style("text-anchor", "end")
  79. .text(function(d) { return d; });
  80. });
  81. }
  82. updateData('data1.csv');
  83. });

字符串

展开查看全部
x8goxv8g

x8goxv8g4#

我刚刚发现,如果你的元素id只是一个number,那么d3.select(“1234”),将无法工作。
唯一ID必须是alpha-numeric字符。
d3.select(“1234”)
d3.select(“container1234”)

a11xaf1n

a11xaf1n5#

只需在</bod>标记之前添加<script src="./custom.js"></script>即可。这将为d3.select(#chart)检测html主体中#chart元素提供时间

tjjdgumg

tjjdgumg6#

你只需要做简单的事情。

  • 将脚本放在<div></div>部分之后。
  • 这是因为你的D3脚本运行之前加载了body部分,所以D3无法找出你的div
e0uiprwp

e0uiprwp7#

请尝试这种方法。它对我很有效。

  1. <head>
  2. <script type="text/javascript" src='./d3.v4.min.js'></script>
  3. </head>
  4. <body>
  5. <div id="jschart41448" style="color:red">
  6. Hi red
  7. </div>
  8. <div id="jschart41449" style="color:blueviolet">
  9. Hi blueviolet
  10. </div>
  11. <script type="text/javascript" >
  12. d3.select("#jschart41448").style('color', 'green' , null);
  13. d3.select("#jschart41449").style('color', 'yellow', null);
  14. </script>
  15. </body>

字符串

展开查看全部

相关问题