d3.js 相关问题

D3.js是一个JavaScript库，用于使用HTML，SVG和Canvas创建文档的交互式数据绑定可视化。

我正在尝试实现一个条形图，其中有一个选择下拉列表，其中包含 3 个值：按日期、按周、按月（默认情况下为“按日期”）。来自后端的“ByDate”数据很多...

javascript angular typescript d3.js

回答 1 投票 0

我显然可以这样做： d3.selectAll('div#some-div>ul') 但是如果我使用 DOM 节点或现有的 D3 选择怎么办： d3.select(this).selectAll('ul') 将为我提供所有后代 UL。因此，如果 var d...

d3.js

回答 9 投票 0

使用SVG的部分边框/描边

我正在使用 svg/d3 创建由“矩形”元素组成的图表。为每个矩形添加部分边框/描边（仅在矩形顶部）的最佳方法是什么？谢谢

javascript html svg d3.js stroke

回答 2 投票 0

在MUI X Charts中，如何防止LineChart Y轴标签与刻度标签重叠？

我一直在使用非常基本的折线图，其呈现如下：正如您所看到的，货币标签与刻度线重叠。避免这种情况的最佳方法是什么？折线图来源：常量

reactjs d3.js charts mui-x mui-x-charts

回答 2 投票 0

相当于组件内部翻译还是组件本身翻译？

我尝试这段代码（JSFiddle）常量块 = () => { 返回（我尝试这个代码（JSFiddle） const Piece = () => { return ( <svg> <g transform="translate(XXX,XXX)"> <circle cx="-50" cy="-50" r="10" fill="black" /> </g> </svg> ) } const root = ReactDOM.createRoot(document.getElementById("app")); root.render( <svg width="700" height="700" fill="#FFDDDD"> <g transform="translate(YYY,YYY)"> <Piece /> </g> </svg> ); 其中 XXX 和 YYY 等于 0 或 100，我可以看到：如果平移发生在组件 Piece 内部（XXX=100，YYY=0），则其工作原理是圆圈出现在屏幕上，即使它最初设计在屏幕外部（-50，-50）；如果平移发生在主组件内部（XXX=0，YYY=100），则不会出现圆圈。我以为里面翻译和外面翻译是一样的，其实不然。问题是我想收集许多不同的部分，将翻译的价值传递给所有这些部分并不是一件好事...... 当然，我已经在真实的React（18）和d3（7）结构上使用不同的文件Piece、App等测试了代码，结果是相同的。我在这里缺少什么？如果你正确地编写了 SVG，那么使用哪个 <g> 进行翻译并不重要： svg { border: 1px solid black; } <svg width="300" height="300" fill="#FFDDDD" viewBox="0 0 100 100"> <g transform="translate(100,100)"> <g transform="translate(0,0)"> <circle cx="-50" cy="-50" r="10" fill="black" /> </g> </g> </svg> <svg width="300" height="300" fill="#FFDDDD" viewBox="0 0 100 100"> <g transform="translate(0,0)"> <g transform="translate(100,100)"> <circle cx="-50" cy="-50" r="10" fill="black" /> </g> </g> </svg> 但是，这确实需要编写正确的 SVG：一个 <svg> 根，带有 viewBox 属性，以便浏览器知道它实际渲染的内容，并且没有嵌套 <svg> 元素： // you don't need a `<g>` if you're transforming a single element. // the "transform" attribute can be used on *any* SVG element. const Piece = ({ tx:0, ty:0 }) => ( <circle cx="-50" cy="-50" r="10" fill="black" transform="translate({tx},{ty})"/> ); // But you need viewBox, otherwise your SVG cannot be rendered correctly. // However: here, too, you don't need <g> const SVG = ({ tx:0, ty:0 }) => ( <svg width="100" height="100" fill="#FFDDDD" viewBox="0 0 100 100"> <Piece tx={tx} ty={ty}/> </svg> ); const root = ReactDOM.createRoot(document.getElementById("app")); root.render(<SVG tx={100} ty={100}/>);

reactjs d3.js translation

回答 1 投票 0

用于时间序列图的 mpld3 鼠标位置插件

我正在尝试为时间序列图创建一个 mpld3 鼠标位置插件，其 x 轴上的日期时间与此示例类似。但是，我不断在控制台中收到以下错误：键入呃...

python d3.js mpld3

回答 1 投票 0

D3.js中如何调整轴.domain线的大小？

我正在使用D3构建一个图表，我需要剪掉x和y线的多余尺寸，它们有一个.domain类，我已经圈出了我想要删除的区域：我希望它看起来像这样：我...

reactjs typescript d3.js

回答 1 投票 0

将D3.js多节点、多链接转换为新版本

我请求您为我正在开发的工具提供帮助。在全球范围内，我找到了我正在寻找的东西（https://jsfiddle.net/4xt5v51m/3/），但问题是它似乎与我的 D3 版本不兼容......