如何使用D3.js(在VSCODE中)将Tailwind CSS类应用于SVG元素?

bjp0bcyl  于 2023-11-19  发布在  Vscode
关注(0)|答案(1)|浏览(171)

如何使用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" }这样的东西应该可以正常工作。
请让我知道如果我需要提供任何额外的信息。

zzlelutf

zzlelutf1#

同样的情况也发生在我身上,这里有一个简单的解决方案,我发现:

顶级域名:

要使用 D3.js 将Tailwind CSS类应用于SVG元素,
可以在 D3.js 中使用.classed()方法
而不是使用.attr()方法。

详细答案:

.classed()方法将类添加到所选的 D3.js 元素。
不知何故,顺风的终端命令似乎读得很好,
在我的情况是:

npx tailwindcss -i ./input.css -o ./dist/output.css --watch

字符串
像你一样使用 Vite 作为捆绑器,以及普通JavaScript(香草)。
至于我的tailwindcss配置,如下所示:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: ["./*.{html,js}"],
  theme: {
    extend: {},
  },
  plugins: [],
}


正如您所看到的,我让.content对象也读取目录中的JavaScript文件。
(使用"./*.{html,js}"正则表达式)
但我从您的问题中了解到,问题并不存在......我只是向阅读本文的未来开发人员指出,这可能会有所帮助
下面是一个示例代码段,演示如何使用.classed()方法将Tailwind CSS类应用于SVG矩形元素:

d3.select('svg')
  .append("rect")
  .classed('fill-red-500', true) // here the "class" working in tailwind
  .attr("x", 10)
  .attr("y", 10)
  .attr("height", 50)
  .attr("width", 50)

console.clear() // just for the snippet, you don't need it
<!-- don't use this script in production, this is only for stackoverflow snippet.... use npm instead -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/7.8.2/d3.min.js" integrity="sha512-oKI0pS1ut+mxQZdqnD3w9fqArLyILRsT3Dx0B+8RVEXzEk3aNK3J3pWlaGJ8MtTs1oiwyXDAH6hG6jy1sY0YqA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="https://cdn.tailwindcss.com"></script>

<svg height="300" width="300"></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在这种情况下,可以是truefalse...如果您返回字符串或数字之类的其他内容,据我所知JavaScript的行为往往类似于返回true,除非是空字符串""nullundefined
data()方法用于将数据附加到这些元素。dataset数组作为参数传递给该方法。
下面是一个示例,您也可以使用函数根据某些条件动态设置类:

.classed('fill-green-500', (num) => num > 50) // if num is greater than 50 then add green
  .classed('fill-red-500', (num) => num <= 50); // if num is less or equal to 50 then add the class red.

IDE智能感知

  • 智能感知又如何呢?*

默认情况下不会显示弹出的建议。
因此,我试着在顺风GitHub页面上为你打开一个问题...
最后一切皆有可能:),我为你找到了一个解决方案!

  • 那是什么 *

您需要更改顺风配置,方法是按照其中一位Maven在另一期文章中所写的注解进行操作:配置tailwindCSS.experimental.classRegex选项。

  • 如何在我VSCODE中找到此选项?*
  • 您只需要首先打开IDE中的任何文件(文件类型无关紧要)
  • CTRL+SHIFT+P组合键

x1c 0d1x的数据
如您所见,它将打开一个快捷方式列表

  • 搜索"setting",然后输入
  • 您将在顶部看到一个带有搜索栏的界面。

类型"TailwindCSS"


  • 在下面的列表中滚动,直到找到文本为TailwindCSS > Experimental: Class Regex的项目。


  • 现在,您可以按照此处的说明配置tailwindCSS.experimental.classRegex选项,在括号内添加正则表达式。

下面是为您创建的配置:

"tailwindCSS.experimental.classRegex": [
   "classed\\(\"([^)]*)\"\\)"
]


如你在这里看到的,是一个正则表达式数组。
IDE上的结果:


相关问题