html 演示基于预先存在的ID将数据附加到DOM元素

Posted

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 演示基于预先存在的ID将数据附加到DOM元素相关的知识，希望对你有一定的参考价值。

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.circle {
  fill: steelblue;
}

</style>
<div class="d3" id="foo"></div>
<div class="d3" id="bar"></div>
<div class="d3" id="baz"></div>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script>

var data = [{name: 'bar', value: 5}, {name: 'foo', value: 10}, {name: 'baz', value: 15}];

var margin = {top: 5, right: 5, bottom: 5, left: 5},
              width = 300 - margin.left - margin.right,
              height = 200 - margin.top - margin.bottom;

d3.selectAll('.d3').append('svg')
  .attr('width', width + margin.left + margin.right)
  .attr('height', height + margin.top + margin.bottom)
.append('g')
  .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')')
  .attr('class','group')
  .attr('id', function(){
          return this.parentNode.parentNode.id;
        });

d3.selectAll('.group').each(function() { this.__data__ = { name: this.id};});

d3.selectAll('.group')
  .data(data, function(d){ return d.name; })
.append('circle')
  .attr('class','circle')
  .attr('cx', 50)
  .attr('cy', 50)
  .attr('r', function(d){ return d.value; });
  
</script>

以上是关于html 演示基于预先存在的ID将数据附加到DOM元素的主要内容，如果未能解决你的问题，请参考以下文章

如何将多个预先存在的 AWS 托管角色附加到策略？

将 HTML 字符串附加到 DOM

Laravel Eloquent - 附加与 SyncWithoutDetaching

Python Flask将所有字符串附加到DOM

MVCContrib，Html.Grid：如何将基于行的 id 附加到 td 标签？

为啥将文字 HTML 字符串附加到 DOM？