如何将对d3元素的引用传递给函数？

Question

我有一个元素可以通过“d3.select（this。$ el）.append（'svg'）”进行操作，我的问题是如何才能在被调用的函数中进行相同的操作？

我是d3和jquery的新手，刚刚从Splunk完成了本教程，它使用了两个： https ： //docs.splunk.com/Documentation/Splunk/6.5.3/AdvancedDev/CustomVizTutorial 。

当我尝试将svg的创建移动到单独的函数中时出现问题。 这是我的更新视图功能：

    updateView: function(data, config) {
        // Return if no data
        if (!data) {
            return;
        }

        // Assign datum to the data object returned from formatData
        var datum = data;

//START BIT THAT WORKS
        // Clear the div
        /*this.$el.empty();

        // Get color config or use a default yellow shade
        var mainColor = config[this.getPropertyNamespaceInfo().propertyNamespace + 'mainColor'] || '#f7bc38';

        // Set meter max value or use a default
        var maxValue = parseFloat(config[this.getPropertyNamespaceInfo().propertyNamespace + 'maxValue']) || 100;

        // Set height and width
        var height = 220;
        var width = 420;

        // SVG setup
        var svg  = d3.select(this.el).append('svg')
            .attr('width', width)
            .attr('height', height)
            .style('background', 'white')
            .append('g')
            .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');

        // Text
        svg.append('text')
            .datum(datum)
            .attr('class', 'meter-center-text')
            .style('text-anchor', 'middle')
            .style('fill', mainColor)
            .text(function(d){
                return "0";
                //return parseFloat(d);
            });*/
//END BIT THAT WORKS

        newFunc=function(myElement) {
            console.log("newFunc");

            // Clear the div
            myElement.empty();

            // Get color config or use a default yellow shade
            mainColor='#f7bc38';

            // Set meter max value or use a default
            maxValue=1000000;

            // Set height and width
            var height = 220;
            var width = 420;

            // SVG setup
            var svg  = d3.select(myElement).append('svg')
                .attr('width', width)
                .attr('height', height)
                .style('background', 'white')
                .append('g')
                .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')');

            // Text
            svg.append('text')
                .datum(datum)
                .attr('class', 'meter-center-text')
                .style('text-anchor', 'middle')
                .style('fill', mainColor)
                .text(function(d){
                    return "100";
                });
        };
        newFunc(this.$el);
    }

上半部分是教程中的代码，这可以按预期工作（上面已经注释掉了）。

下半部分是我在一个新函数中复制这个代码，为了简单起见，它只是一个内部函数。

这会产生错误“this.ownerDocument is undefined”，我将其缩小为由“d3.select（myElement）.append（'svg'）”行引起的。

所以我的问题是，传递对该元素的引用并在函数内处理它的正确方法是什么？

Answer 1

简短的回答：你做不到。

现在你正试图传递一个jQuery对象作为newFunc的参数。 但是， d3.select仅接受字符串（选择器）或DOM元素。

根据D3 API， d3.select ：

选择与指定选择器字符串匹配的第一个元素。 如果选择器不是字符串，则选择指定的节点 。 （强调我的）

让我们在第一个片段中看到这一点。 正文中有<div> ， myDiv作为ID。 如果我们用jQuery选择那个div ...

var elem = $("#myDiv");

...你将拥有一个jQuery对象。 根据jQuery API：

在创建新元素（或选择现有元素）时，jQuery返回集合中的元素。 许多jQuery新手都认为这个集合是一个数组。 它具有零索引的DOM元素序列，一些熟悉的数组函数和一个.length属性。 实际上， jQuery对象比这更复杂。 （强调我的）

这是片段，看看两个console.log ，比较它们：

 var elem = $("#myDiv"); console.log(elem[0]); console.log(elem); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="myDiv"></div> 

如您所见，您不能将$(foo)作为参数传递给d3.select 。

但是，您可以传递$(foo)[0] ，这是节点。

这是第二个显示此内容的片段。 我正在使用你的大部分代码，但将$("#myDiv")[0]传递给newFunc ：

 newFunc = function(myElement) { // Get color config or use a default yellow shade mainColor = '#f7bc38'; // Set meter max value or use a default maxValue = 1000000; // Set height and width var height = 220; var width = 420; // SVG setup var svg = d3.select(myElement).append('svg') .attr('width', width) .attr('height', height) .style('background', 'white') .append('g') .attr('transform', 'translate(' + width / 2 + ',' + height / 2 + ')'); // Text svg.append('text') .datum("foo") .attr('class', 'meter-center-text') .style('text-anchor', 'middle') .style('fill', mainColor) .text(function(d) { return "100"; }); }; var elem = $("#myDiv"); newFunc(elem[0]); 

 <script src="https://d3js.org/d3.v4.min.js"></script> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <div id="myDiv"></div> 

PS：因为我们不再有jQuery对象，所以删除了myElement.empty(); 。

PPS：请不要混用D3和jQuery 。 这个不成立。