Question

我有一个可以操纵的元素＆＃34; d3.select（这个。$ el）.append（＆＃39; svg＆＃39;）＆＃34;，我的问题是如何制作它可以在被调用函数中进行相同的操作吗？

我是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);
    }

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

下半部分是我在新功能中复制此代码，为简单起见，它只是一个内部功能。

这会产生错误＆＃34; this.ownerDocument未定义＆＃34;，我已将其缩小为由＆＃34; d3.select（myElement）.append（＆＃39; SVG＆＃39;）＆＃34;线。

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

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，比较它们：

＆＃13;

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

＆＃13;

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

＆＃13;

如您所见，无法将$(foo)作为d3.select的参数传递给函数。

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

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

＆＃13;

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]);

＆＃13;

<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>

＆＃13;

PS：由于我们不再拥有jQuery对象，因此我删除了myElement.empty();。

PPS：请不要混合使用D3和jQuery 。这毫无意义。

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

1 个答案: