如何從 d3 導入子模塊以輕松創建圖例？

Question

我對 JavaScript 和 D3 比較陌生，所以請記住這一點。 我創建了一個可視化來顯示對倉庫中特定位置的訪問頻率，並希望使用連續色標添加圖例。

我看過幾個塊，可以想出一些切線的東西，但是我遇到了這個網頁並想使用圖例功能。 天真地，我嘗試添加

import {legend} from "@d3/color-legend"

正如預期的那樣失敗了。 我不知道該怎么做才能使這個導入工作。 我已經下載了最新的 d3.zip 文件並嘗試了以下來源但沒有成功。

<script type="text/javascript" src="https://d3js.org/d3.v5.js"></script>
<script type="text/javascript" src="d3.js"></script>

任何指導將不勝感激。

Answer 1

給定該模塊名稱的相對路徑， import只能在 Observable 的單元格中工作。 如果這不是您的情況，只需復制整個函數，您將在下面找到（單擊“顯示代碼片段”），或將其另存為文件（然后您可以使用適當的模塊名稱進行import ）：

 function legend({ color, title, tickSize = 6, width = 320, height = 44 + tickSize, marginTop = 18, marginRight = 0, marginBottom = 16 + tickSize, marginLeft = 0, ticks = width / 64, tickFormat, tickValues } = {}) { const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("overflow", "visible") .style("display", "block"); let x; // Continuous if (color.interpolator) { x = Object.assign(color.copy() .interpolator(d3.interpolateRound(marginLeft, width - marginRight)), { range() { return [marginLeft, width - marginRight]; } }); svg.append("image") .attr("x", marginLeft) .attr("y", marginTop) .attr("width", width - marginLeft - marginRight) .attr("height", height - marginTop - marginBottom) .attr("preserveAspectRatio", "none") .attr("xlink:href", ramp(color.interpolator()).toDataURL()); // scaleSequentialQuantile doesn't implement ticks or tickFormat. if (!x.ticks) { if (tickValues === undefined) { const n = Math.round(ticks + 1); tickValues = d3.range(n).map(i => d3.quantile(color.domain(), i / (n - 1))); } if (typeof tickFormat !== "function") { tickFormat = d3.format(tickFormat === undefined ? ",f" : tickFormat); } } } // Discrete else if (color.invertExtent) { const thresholds = color.thresholds ? color.thresholds() // scaleQuantize : color.quantiles ? color.quantiles() // scaleQuantile : color.domain(); // scaleThreshold const thresholdFormat = tickFormat === undefined ? d => d : typeof tickFormat === "string" ? d3.format(tickFormat) : tickFormat; x = d3.scaleLinear() .domain([-1, color.range().length - 1]) .rangeRound([marginLeft, width - marginRight]); svg.append("g") .selectAll("rect") .data(color.range()) .join("rect") .attr("x", (d, i) => x(i - 1)) .attr("y", marginTop) .attr("width", (d, i) => x(i) - x(i - 1)) .attr("height", height - marginTop - marginBottom) .attr("fill", d => d); tickValues = d3.range(thresholds.length); tickFormat = i => thresholdFormat(thresholds[i], i); } svg.append("g") .attr("transform", `translate(0, ${height - marginBottom})`) .call(d3.axisBottom(x) .ticks(ticks, typeof tickFormat === "string" ? tickFormat : undefined) .tickFormat(typeof tickFormat === "function" ? tickFormat : undefined) .tickSize(tickSize) .tickValues(tickValues)) .call(g => g.selectAll(".tick line").attr("y1", marginTop + marginBottom - height)) .call(g => g.select(".domain").remove()) .call(g => g.append("text") .attr("y", marginTop + marginBottom - height - 6) .attr("fill", "currentColor") .attr("text-anchor", "start") .attr("font-weight", "bold") .text(title)); return svg.node(); }

然而，還有另一個障礙：目前該函數也只能在 Observable 的單元格中工作。 如果您希望它在常規網頁上工作，請更改其返回值（或附加 SVG 作為副作用）。