如何使用 D3.js（在 VSCODE 中）将 Tailwind CSS 类应用到 SVG 元素？

Question

如何使用 D3.js 将 Tailwind CSS 类应用到 SVG 元素？

我正在开发一个 Web 项目，需要使用 Tailwind CSS 和 D3.js。但是，我在使用 D3.js 中的 .attr() 方法将 Tailwind CSS 类应用到 SVG 元素时遇到问题。

例如，当我尝试fill-red-500使用 将该类应用于矩形d3.select('rect').attr('class', 'fill-red-500')时，该类似乎没有正确应用，并且矩形也没有改变颜色。

我已经确认我的 Tailwind 配置文件是正确的，因为我能够成功地将它与tooltip.html("<div class="bg-red-500">hello world</div>"). 但是，我不想.html()一直使用，因为我使用 D3.js 来使图表编码变得更容易。

我也尝试过不同的方法，但似乎都不起作用。我已经验证该类显示在开发工具中，但屏幕上没有显示任何样式。

我的项目使用 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" }应该可以正常工作。

如果我需要提供任何其他信息，请告诉我。

Answer 1

同样的情况也发生在我身上，这是我发现的一个简单的解决方案：

总而言之：

要使用D3.js将 Tailwind CSS 类应用到 SVG 元素，
您可以使用D3.js.classed()中的方法而不是方法。
.attr()

详细解答：

该.classed()方法将类添加到选定的D3.js元素。

不知何故，顺风的终端命令似乎读得很好，
在我的例子中是：

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

像你一样使用Vite作为捆绑器，以及 Normal Javascript (Vanilla)。

至于我的 tailwindcss 配置，这里是：

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

如您所见，我让.content对象还读取目录中存在的 javascript 文件。
（使用"./*.{html,js}"正则表达式）

但当我从你的问题中读到时，问题并不存在......我只是向未来阅读此内容的开发人员指出，也许会有所帮助

下面是一个示例代码片段，演示了如何使用.classed()方法将 Tailwind CSS 类应用到 SVG 矩形元素：

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

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

正如您在之前的代码片段中看到的，此方法.classed('fill-red-500', true)需要两个参数：

1. 带有 tailwind 类名称的字符串（类似于.attr()您已经熟悉的）
2. 一个布尔值。
   • 如果你通过了true，那么该类将应用于 svg 元素
     （为了让你明白：就像.classList.add()在 vanilla JS 中使用一样）
   • 如果你通过了false，那么该类不会应用于 svg 元素
     （为了让你明白：就像.classList.remove()在 vanilla JS 中使用一样）

是不是很酷？

如果你有一些使用 d3js 的经验，
你肯定知道它很常见callback functions，
就像这样() => {}。

如果你使用.data(dataset).enter()SVG 元素的方法（你应该这样做以获得 D3js 的优势），
那么你也可以使用(d) => {}，这样你就可以做一些计算并返回一些东西
（在这种情况下，可以是true或false...如果你返回诸如字符串或数字之类的其他内容，据我所知，javascript 的行为往往类似于返回 atrue除非是空字符串""或null或undefined)

该data()方法用于将数据附加到这些元素。该dataset数组作为参数传递给该方法。

这是一个示例，您还可以使用函数根据某些条件动态设置类：

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

IDE智能感知

那么 IntelliSense 又如何呢？

默认情况下它不会显示建议弹出窗口。

因此，我尝试在 tailwind GitHub 页面上为您打开一个问题...
最终一切皆有可能:)，并且我为您找到了解决方案！

它是什么？

您需要按照专家在另一期中撰写的评论来更改顺风配置：配置tailwindCSS.experimental.classRegex选项。

如何在 VSCODE 中找到此选项？

• 您只需首先在任何文件上打开 IDE（文件类型无关紧要）
• CTRL+ SHIFT+P
  
  正如你所看到的，它将打开一个快捷方式列表
• 搜索"setting"然后ENTER
• 您将看到一个顶部有搜索栏的界面。
  类型"TailwindCSS"
  
• 在下面的列表中滚动，直到找到带有文本的项目TailwindCSS > Experimental: Class Regex。
  
• 现在，您可以按照此处配置选项的说明在括号内添加正则表达式。tailwindCSS.experimental.classRegex

这是为您创建的配置：

  .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 上的结果：