Question

我正在使用D3创建一个条形图，并使用jquery来选择条形图。我遇到了一个问题，我不明白我认为我在哪里使用$（this）选择了一个条形（矩形），并且console.log（）语句似乎证实了这一点。但是，我在使某些功能（例如转换，样式）工作时遇到问题 - 错误消息显示它们不是函数。

我已经构建了一个我在下面遇到的问题的小例子。而不是条形图，只有两个矩形。我成功更改了宽度，但无法使用过渡来平滑此更改，也无法使用$（this）.style更改填充颜色。

感谢您的帮助！这是我的代码。

P.S。这是我的第一个StackOverflow问题，所以请告诉我是否应该以不同的方式提出这个问题和/或是否有一些我没有遵循的惯例。关于这个问题，我在几天内做了相当详尽的搜索，并且确实遇到了障碍。再次感谢！

<body>
    <svg width="1000" height="1000" id="this_svg">
      <rect x="0" y="0" width="100" height="100" fill="blue" data-color="red"> </rect>
      <rect x="0" y="100" width="100" height="100" fill="green" data-color="purple"></rect>
    </svg>

    <script>
        $ (document ).ready(function() {
            $svg = $("#this_svg")
            rcts = $svg.find("rect")
            // This Works Fine
            rcts.each(function() {
                $(this).attr("width", "500")
            });
            // This breaks (see error message):
            // Uncaught TypeError: $(...).transition is not a function
            rcts.each(function() {
                $(this).transition().duration(500).attr("width", "500")
            });
            //... and if this hadn't already broken, this next part would
            // break instead (see error message):
            // Uncaught TypError: $(...).style is not a function
            rcts.each(
                $(this).style("fill", function() {
                    return $(this).attr("data-color")
            }));
        });
    </script>
</body>

Answer 1

d3 !== jquery，您无法在d3选择器上调用jquery选择器的方法。注意，方法名称有一些重叠（例如，它们都有attr方法），但它们仍然不一样。

解决问题的简单方法是使用d3转换功能：

 d3.select(this).transition().duration(500).attr("width", "500");

但听起来您需要阅读以便更好地了解这两个库的用例。在我看来，在将任何内容编码为d3时，请不要加载jquery。你不需要那个jquery拐杖，而是用d3方式做，而且从长远来看你不会那么困惑。

Answer 2

如果使用D3创建条形图，则应使用相同的D3选择其元素。使用jQuery选择这些元素毫无意义。

您的代码无效，因为UPDATE T1 SET T1.old_id= T2.new_id FROM T1, T2 WHERE T1.old_id= T2.old_id;和transition()都不是jQuery函数。话虽这么说，你应该使用D3来操纵你的元素：

style

var rects = d3.selectAll("rect");
rects.transition().duration(1000).attr("width", 500).attr("fill", function(){
 return d3.select(this).attr("data-color");
})

D3使用jquery $（this）选择器更新条形图

2 个答案: