相关疑难解决方法(0)

我是D3的新手并在几张图表上进行实验.在使用D3 V4构建折线图时,我遇到了以下错误.

d3.line(...).x(...).y(...).interpolate不是函数

我认为这个错误是由于D3 v4中的函数插值不可用.如果有人可以帮助我使用插值函数的替换函数,那将会很棒.

我的代码在以下链接中

https://ghostbin.com/paste/ztans

如何rect使用SVG 创建一个调整自身大小以适应其内部文本的框(？)？

我正在尝试在svg图像周围添加边框.我尝试了两种方法,但都失败了......

尝试1:绘制图像但没有边框..

<image id="note-0" xlink:href="http://example.com/example.png" x="185" y="79" height="202" width="150" style="stroke:#ac0d0d; stroke-width:3;"></image>

尝试2:绘制图像但没有边框..

<defs>
    <image id="image1352022098990svg" height="202" width="150" xlink:href="http://example.com/example.png"></image>
</defs>

<use xmlns="http://www.w3.org/2000/svg" id="note-0" xlink:href="#image1352022098990svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="185" y="79" height="202" width="150" style="stroke:#ac0d0d; stroke-width:3;"/>

所以我的问题是,是否有可能在svg元素上定义一个图像并同时在它周围有一个边框/笔划？

此外,似乎我可以使用translate和x/y属性来定位svg元素.哪个是优先的,为什么？

我正在编写一个使用React生成SVG的可视化应用程序.我需要的一个部分是标签 - 即文本,由一个封闭的盒子包围,带有可变文本,可能是旋转和样式.

所以我有一个组件NodeLabel,目前有固定的尺寸:

render() {
        return <g>
            <rect className="label" x={this.props.x} y={this.props.y-10} width={20} height={40}></rect>
            <text className="labelText" x={this.props.x} y={this.props.y}>{this.props.children}</text>
        </g>
    }

我在DOM中找到了一些关于这样做的信息,这里是:SVG文本周围的矩形边框

但我不太清楚如何将其转换为React组件 - 在render()方法中,没有要查看的DOM元素.我可以使用document.createElement()而不是期望SVG元素的维度正常运行(并尊重CSS)吗？另外,有没有办法避免基本上创建代码的两个副本,一个在JSX中,另一个在此之前用于计算尺寸？(比如,例如,为这个临时的屏幕外拷贝评估JSX到DOM元素的片段)

更新:2018年1月,我又回到了这里:-)实际应用程序是一个开源网络图表工具,目前正在使用GD和PHP,但我希望转向JS,React和SVG.

这里的带宽标签是我想要重现的,尽管节点标签在当前的非SVG版本中使用相同的功能.

这是我的新的最小例子:

// MyLabel should be centred at x,y, rotated by angle, 
// and have a bounding box around it, 2px from the text.
class MyLabel extends React.Component {
  render() {
    const label = <text x={this.props.x} y={this.props.y} textAnchor="middle" alignmentBaseline="central">{this.props.children}</text>;
        
    // label isn't a DOM element, so you can't call label.getBoundingClientRect() …