Javascript 如何将动态对象附加到HTML元素？

我正在使用D3.js创建一个图表，如本简化示例所述

class MyClass {
   // logic goes here
   // constructor() and other functions defined here.
   doSomething() {
       console.log('something.');
   }
}

function createChart(chartID, data) {
    // creating the SVG and appending it to the body
    var svg = d3.select('body').append('svg')
                     .attr('width',400)
                     .attr('height',400)
                     .attr('id',chartID);

   // instantiating an instance of MyClass to be attached to the SVG
   var anObject = new MyClass();
   svg.myObject = anObject;   // this has no effect


   // code to actually build the chart + math to be done on passed data

   // finally, attach a click event to the svg so that data can be manipulated later on
   svg.on('click',function(){
        var object = d3.select(this).myObject;   //this does not work
        object.doSomething();                   // so this also doesn't work
   });
}

createChart('test1',[1,2,3,4]);   // triggering the createChart() function

我假设变量

svg

被视为任何JSON对象，因此，我认为可以将任何对象附加到它

---

显然，情况并非如此。如何将对象附加到HTML DOM元素，以便以后可以访问该对象？

svg

变量是包含DOM元素的d3选择对象

您可以设置svg的

datum（）

，然后检索它

function createChart(chartID, data) {
    // creating the SVG and appending it to the body
    var svg = d3.select('body').append('svg')
                     .attr('width',400)
                     .attr('height',400)
                     .attr('id',chartID);

   // instantiating an instance of MyClass to be attached to the SVG
   var anObject = new MyClass();
   svg.datum(anObject);


   // code to actually build the chart + math to be done on passed data

   // finally, attach a click event to the svg so that data can be manipulated later on
   svg.on('click',function(){
        var object = d3.select(this).datum();
        object.doSomething();
   });
}

或者使用

click中的
this
处理程序是DOM元素这一事实

function createChart(chartID, data) {
    // creating the SVG and appending it to the body
    var svg = d3.select('body').append('svg')
                     .attr('width',400)
                     .attr('height',400)
                     .attr('id',chartID);

   // instantiating an instance of MyClass to be attached to the SVG
   var anObject = new MyClass();
   svg.node().myObject = anObject;


   // code to actually build the chart + math to be done on passed data

   // finally, attach a click event to the svg so that data can be manipulated later on
   svg.on('click',function(){
        var object = this.myObject;
        object.doSomething();
   });
}

svg
变量是包含DOM元素的d3选择对象

您可以设置svg的
datum（）
，然后检索它

function createChart(chartID, data) {
    // creating the SVG and appending it to the body
    var svg = d3.select('body').append('svg')
                     .attr('width',400)
                     .attr('height',400)
                     .attr('id',chartID);

   // instantiating an instance of MyClass to be attached to the SVG
   var anObject = new MyClass();
   svg.datum(anObject);


   // code to actually build the chart + math to be done on passed data

   // finally, attach a click event to the svg so that data can be manipulated later on
   svg.on('click',function(){
        var object = d3.select(this).datum();
        object.doSomething();
   });
}

或者使用
click中的
this
处理程序是DOM元素这一事实

function createChart(chartID, data) {
    // creating the SVG and appending it to the body
    var svg = d3.select('body').append('svg')
                     .attr('width',400)
                     .attr('height',400)
                     .attr('id',chartID);

   // instantiating an instance of MyClass to be attached to the SVG
   var anObject = new MyClass();
   svg.node().myObject = anObject;


   // code to actually build the chart + math to be done on passed data

   // finally, attach a click event to the svg so that data can be manipulated later on
   svg.on('click',function(){
        var object = this.myObject;
        object.doSomething();
   });
}

再加上，这是D3局部变量的一个很好的用途

根据报告：

D3局部变量允许您独立于数据定义局部状态

因此，您可以设置本地

var local = d3.local();

local.set(svg.node(), myObject)

。。。而且很容易得到：

local.get(svg.node())

这样，您就不需要将不必要的数据（即与可视化无关的数据）绑定到DOM元素

下面是一个演示：


var local=d3.local（）；
类MyClass{
doSomething（）{
console.log（'something'）；
}
}
函数createChart（chartID，数据）{
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，200）
.attr（'height'，200）
.attr（'id'，chartID）；
var anObject=new MyClass（）；
local.set（svg.node（），anObject）
svg.on（'click'，function（）{
local.get（this.doSomething）（）
});
}
createChart（'test1'，[1,2,3,4]）
svg{
背景色：小麦；
}
这是D3局部变量的一个很好的用途

根据报告：

D3局部变量允许您独立于数据定义局部状态

因此，您可以设置本地

var local = d3.local();

local.set(svg.node(), myObject)

。。。而且很容易得到：

local.get(svg.node())

这样，您就不需要将不必要的数据（即与可视化无关的数据）绑定到DOM元素

下面是一个演示：


var local=d3.local（）；
类MyClass{
doSomething（）{
console.log（'something'）；
}
}
函数createChart（chartID，数据）{
var svg=d3.select（'body'）
.append（'svg'）
.attr（'width'，200）
.attr（'height'，200）
.attr（'id'，chartID）；
var anObject=new MyClass（）；
local.set（svg.node（），anObject）
svg.on（'click'，function（）{
local.get（this.doSomething）（）
});
}
createChart（'test1'，[1,2,3,4]）
svg{
背景色：小麦；
}