Question

如何确定使用d3加载的图像的宽度和高度，以便：

按比例缩放
将其他元素（如边框）的大小调整为图像

这适用于Electron项目，因此我在我的代码中使用path等。在下图和生成它的代码中，我有一个图像，我可以缩放到任意大小 - 我想用绿色边框调整rect的大小以适应图像。

如果只提供一个维度，似乎保留了图像的宽高比，所以上面的＃2是我最重要的问题。

更新答案
扩展#ccprog的答案，包括选择on load回调中的兄弟：

newEvent.append("image")
    .attr("class", "event-content")
    .attr("x", horizontal_margin)
    .attr("y", 15)
    .attr("width", 160)
    .attr("xlink:href", function (d, i) {
        return path.join(__dirname, "assets", "image_01.jpg")
    })
    .on("load", function (d, i) {
        var rect = d3.select(this.parentNode).selectAll("rect")
        var h = this.getBBox().height;
        rect.attr("height", h);
    });

图片摘要

  newEvent.append("image")
                .attr("class", "event-content")
                .attr("x", horizontal_margin)
                .attr("y", 15)
                .attr("width", 160)
                // .attr("height", 120)
                .attr("xlink:href", function (d, i) {
                    return path.join(__dirname, "assets", "image_01.jpg")
                })

完整代码

var events = content.selectAll("g").data(data.filter(function (d, i) {
                return i < data.length - 1
            }));

            var newEvent = events.enter()
                .append("g")
                //   .attr("transform", "translate(" + margin_content.left + "," + 0 + ")")
                .attr("class", "event");

            newEvent.append("rect")
                .attr("class", "event-content")
                .attr("x", horizontal_margin)
                .attr("y", 15)
                .attr("width", 160)
                .attr("height", 120);

            newEvent.append("circle")
                .attr("class", "event-circle")
                .attr("r", 10)
                .attr("cx", horizontal_margin)
                .attr("cy", 0)
                .on("click", eventClick);


            newEvent.append("image")
                .attr("class", "event-content")
                .attr("x", horizontal_margin)
                .attr("y", 15)
                .attr("width", 160)
                // .attr("height", 120)
                .attr("xlink:href", function (d, i) {
                    return path.join(__dirname, "assets", "image_01.jpg")
                })



            newEvent.append("text")
                .attr('y', 5)
                .attr("x", horizontal_margin + 15)
                .attr("class", "event-text")
                .text(function (d) {
                    var formatDate = d3.timeFormat("%B %e, %Y")
                    var dateStr = formatDate(d.date)
                    return dateStr;

                    // return d.eventText
                });

Answer 1

这里的要点是你必须等待图像被加载才能获得它的尺寸。只有这样，您才能计算rect高度。

虽然Interface HTMLElement提供了属性naturalWidth和naturalHeight，但SVGImageElement却没有。您必须先渲染图像，然后使用SVGGraphicsElement.getBBox()抓住其边界框。

        var rect = newEvent.append("rect")
            .attr("class", "event-content")
            .attr("x", horizontal_margin)
            .attr("y", 15)
            .attr("width", 160);

        newEvent.append("image")
            .attr("class", "event-content")
            .attr("x", horizontal_margin)
            .attr("y", 15)
            .attr("width", 160)
            .attr("xlink:href", function (d, i) {
                return path.join(__dirname, "assets", "image_01.jpg")
            })
            .on("load", function () {
              rect.attr("height", this.getBBox().height);
            })

Answer 2

我认为getBoundingClientRect()应该为你做好准备。

var image_d3 = newEvent.append("image")
            .attr("class", "event-content")
            .attr("x", horizontal_margin)
            .attr("y", 15)
            .attr("width", 160)
            // .attr("height", 120)
            .attr("xlink:href", function (d, i) {
                return path.join(__dirname, "assets", "image_01.jpg")
            })

 var img_rectange = image_d3.node().getBoundingClientRect()
 // you'll now have be able to read from img_rectange.height or img_rectange.width

确定图像高度＆amp;宽度是为了按比例缩放和调整其他元素的大小？

2 个答案: