import {legend} from "@d3/color-legend" html 代码中的这是什么？有可用的 <script src="***"> 吗？

Question

我正在关注这个代码块： https://observablehq.com/@d3/stacked-bar-chart 我想制作相同的图例，但我没有在js文件中编写d3，我正在使用带有脚本的html，我我想知道是否有一个链接可以将其嵌入到 html 中？非常感谢！

Answer 1

我不认为你可以，ObservableHQ 有自己的生态系统来处理这样的包。

\n

如果单击该名称d3/color-legend，您将转到此页面。您可以复制代码内容，但您似乎无法下载它，尤其是不能以可以使用<script src="">. 您可以尝试将其复制到您的代码库中，只需进行很少的更改：

\n

\r\n

\r\n

function legend({\n  color,\n  title,\n  tickSize = 6,\n  width = 320,\n  height = 44 + tickSize,\n  marginTop = 18,\n  marginRight = 0,\n  marginBottom = 16 + tickSize,\n  marginLeft = 0,\n  ticks = width / 64,\n  tickFormat,\n  tickValues\n} = {}) {\n  const svg = d3.select("svg")\n    .attr("width", width)\n    .attr("height", height)\n    .attr("viewBox", [0, 0, width, height])\n    .style("overflow", "visible")\n    .style("display", "block");\n\n  let tickAdjust = g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height);\n  let x;\n\n  // Continuous\n  if (color.interpolate) {\n    const n = Math.min(color.domain().length, color.range().length);\n\n    x = color.copy().rangeRound(d3.quantize(d3.interpolate(marginLeft, width - marginRight), n));\n\n    svg.append("image")\n      .attr("x", marginLeft)\n      .attr("y", marginTop)\n      .attr("width", width - marginLeft - marginRight)\n      .attr("height", height - marginTop - marginBottom)\n      .attr("preserveAspectRatio", "none")\n      .attr("xlink:href", ramp(color.copy().domain(d3.quantize(d3.interpolate(0, 1), n))).toDataURL());\n  }\n\n  // Sequential\n  else if (color.interpolator) {\n    x = Object.assign(color.copy()\n      .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), {\n        range() {\n          return [marginLeft, width - marginRight];\n        }\n      });\n\n    svg.append("image")\n      .attr("x", marginLeft)\n      .attr("y", marginTop)\n      .attr("width", width - marginLeft - marginRight)\n      .attr("height", height - marginTop - marginBottom)\n      .attr("preserveAspectRatio", "none")\n      .attr("xlink:href", ramp(color.interpolator()).toDataURL());\n\n    // scaleSequentialQuantile doesn\xe2\x80\x99t implement ticks or tickFormat.\n    if (!x.ticks) {\n      if (tickValues === undefined) {\n        const n = Math.round(ticks + 1);\n        tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1)));\n      }\n      if (typeof tickFormat !== "function") {\n        tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat);\n      }\n    }\n  }\n\n  // Threshold\n  else if (color.invertExtent) {\n    const thresholds = color.thresholds ? color.thresholds() // scaleQuantize\n      :\n      color.quantiles ? color.quantiles() // scaleQuantile\n      :\n      color.domain(); // scaleThreshold\n\n    const thresholdFormat = tickFormat === undefined ? d => d :\n      typeof tickFormat === "string" ? d3.format(tickFormat) :\n      tickFormat;\n\n    x = d3.scaleLinear()\n      .domain([-1, color.range().length - 1])\n      .rangeRound([marginLeft, width - marginRight]);\n\n    svg.append("g")\n      .selectAll("rect")\n      .data(color.range())\n      .join("rect")\n      .attr("x", (d, i) => x(i - 1))\n      .attr("y", marginTop)\n      .attr("width", (d, i) => x(i) - x(i - 1))\n      .attr("height", height - marginTop - marginBottom)\n      .attr("fill", d => d);\n\n    tickValues = d3.range(thresholds.length);\n    tickFormat = i => thresholdFormat(thresholds[i], i);\n  }\n\n  // Ordinal\n  else {\n    x = d3.scaleBand()\n      .domain(color.domain())\n      .rangeRound([marginLeft, width - marginRight]);\n\n    svg.append("g")\n      .selectAll("rect")\n      .data(color.domain())\n      .join("rect")\n      .attr("x", x)\n      .attr("y", marginTop)\n      .attr("width", Math.max(0, x.bandwidth() - 1))\n      .attr("height", height - marginTop - marginBottom)\n      .attr("fill", color);\n\n    tickAdjust = () => {};\n  }\n\n  svg.append("g")\n    .attr("transform", `translate(0,${height - marginBottom})`)\n    .call(d3.axisBottom(x)\n      .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined)\n      .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined)\n      .tickSize(tickSize)\n      .tickValues(tickValues))\n    .call(tickAdjust)\n    .call(g => g.select(".domain").remove())\n    .call(g => g.append("text")\n      .attr("x", marginLeft)\n      .attr("y", marginTop + marginBottom - height - 6)\n      .attr("fill", "currentColor")\n      .attr("text-anchor", "start")\n      .attr("font-weight", "bold")\n      .text(title));\n\n  return svg.node();\n}\n\nfunction ramp(color, n = 256) {\n  var canvas = document.createElement(\'canvas\');\n  canvas.width = n;\n  canvas.height = 1;\n  const context = canvas.getContext("2d");\n  for (let i = 0; i < n; ++i) {\n    context.fillStyle = color(i / (n - 1));\n    context.fillRect(i, 0, 1, 1);\n  }\n  return canvas;\n}\n\nlegend({\n  color: d3.scaleSequential([0, 100], d3.interpolateViridis),\n  title: "Temperature (\xc2\xb0F)"\n})

\r\n

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/6.2.0/d3.min.js"></script>\n<svg></svg>

\r\n

\r\n

\r\n

\n