如何使用D3.js将Tailwind CSS类应用于SVG元素?
我正在做一个需要同时使用Tailwind CSS和D3.js的Web项目。然而,我在使用D3.js中的.attr()方法将Tailwind CSS类应用于SVG元素时遇到了麻烦。
例如,当我尝试使用d3.select('rect').attr('class', 'fill-red-500')
将fill-red-500
类应用于矩形时,该类似乎没有正确应用,矩形没有改变颜色。
我已经确认我的Tailwind配置文件是正确的,因为我能够成功地使用它与tooltip.html("<div class="bg-red-500">hello world</div>")
。但是,我不想使用.html()
所有的时间,因为我使用D3.js使编码图表更容易。
我也尝试了不同的方法,但似乎都不起作用。我已经验证了类在devtools中显示,但屏幕上没有样式出现。
我的项目使用Vite作为编译器,我使用D3.js编写vanilla JS。我使用Tailwind CSS,整个项目没有应用任何CSS。我测试的浏览器是Chrome,我的操作系统是Windows 11。
有没有办法让Tailwind在D3.js中读取.attr("class", "tailwindclass")
方法中的字符串?我对任何解决方案都持开放态度,甚至改变配置。理想情况下,解决方案也应该以编程方式工作。例如,像() => { if(num>60) {return "fill-green-500"} return "fill-red-500" }
这样的东西应该可以正常工作。
请让我知道如果我需要提供任何额外的信息。
1条答案
按热度按时间zzlelutf1#
同样的情况也发生在我身上,这里有一个简单的解决方案,我发现:
顶级域名:
要使用 D3.js 将Tailwind CSS类应用于SVG元素,
可以在 D3.js 中使用
.classed()
方法而不是使用
.attr()
方法。详细答案:
.classed()
方法将类添加到所选的 D3.js 元素。不知何故,顺风的终端命令似乎读得很好,
在我的情况是:
字符串
像你一样使用 Vite 作为捆绑器,以及普通JavaScript(香草)。
至于我的tailwindcss配置,如下所示:
型
正如您所看到的,我让
.content
对象也读取目录中的JavaScript文件。(使用
"./*.{html,js}"
正则表达式)但我从您的问题中了解到,问题并不存在......我只是向阅读本文的未来开发人员指出,这可能会有所帮助
下面是一个示例代码段,演示如何使用
.classed()
方法将Tailwind CSS类应用于SVG矩形元素:的字符串
正如您在前面的代码片段中所看到的,这个方法
.classed('fill-red-500', true)
需要两个参数:1.带有tailwind类名称的字符串(类似于您已经熟悉的
.attr()
)true
,则该类将应用于svg元素(for让你的想法:就像在香草JS中使用
.classList.add()
一样)false
,则该类不会应用于svg元素(for让你的想法:就像在香草JS中使用
.classList.remove()
一样)是不是很酷?
如果您对d3 j有一些经验,
您肯定知道使用
callback functions
是很常见,就像这个
() => {}
如果您对SVG元素使用
.data(dataset).enter()
方法(您应该这样做以获得D3 js的优点),那么你也可以使用
(d) => {}
,这样你就可以做一些计算,然后返回一些(in在这种情况下,可以是
true
或false
...如果您返回字符串或数字之类的其他内容,据我所知JavaScript的行为往往类似于返回true
,除非是空字符串""
或null
或undefined
)data()
方法用于将数据附加到这些元素。dataset
数组作为参数传递给该方法。下面是一个示例,您也可以使用函数根据某些条件动态设置类:
型
IDE智能感知
默认情况下不会显示弹出的建议。
因此,我试着在顺风GitHub页面上为你打开一个问题...
最后一切皆有可能:),我为你找到了一个解决方案!
您需要更改顺风配置,方法是按照其中一位Maven在另一期文章中所写的注解进行操作:配置
tailwindCSS.experimental.classRegex
选项。x1c 0d1x的数据
如您所见,它将打开一个快捷方式列表
"setting"
,然后输入类型
"TailwindCSS"
的
TailwindCSS > Experimental: Class Regex
的项目。的
tailwindCSS.experimental.classRegex
选项,在括号内添加正则表达式。下面是为您创建的配置:
型
如你在这里看到的,是一个正则表达式数组。
IDE上的结果:
的