[英]SVG rect border, not stroke
我正在制作d3圖,並嘗試在我的rect元素周圍放置邊框。 rect元素被附加到一個單元格,而text元素被附加到同一單元格。 因此,如果我在矩形中更改筆划,由於某種原因我會丟失所有文本,並且如果在單元格中更改筆划,邊框和字體也會更改。
這是我用於繪制圖形的代碼的一部分。
this.svg = d3.select("#body").append("div")
.attr("class", "chart")
.style("position", "relative")
.style("width", (this.w +this.marginTree.left+this.marginTree.right) + "px")
.style("height", (this.h + this.marginTree.top + this.marginTree.bottom) + "px")
.style("left", this.marginTree.left +"px")
.style("top", this.marginTree.top + "px")
.append("svg:svg")
.attr("width", this.w)
.attr("height", this.h)
.append("svg:g")
.attr("transform", "translate(.5,.5)");
this.node = this.root = this.nestedJson;
var nodes = this.treemap.nodes(this.root)
.filter(function(d) { return !d.children; });
this.tip = d3.tip()
.attr('class', 'd3-tip')
.html(function(d) {
return "<span style='color:white'>" + (d.name+",\n "+d.size) + "</span>";
})
this.svg.call(this.tip);
var cell = this.svg.selectAll("g")
.data(nodes)
.enter().append("svg:g")
.attr("class", "cell")
.call(this.position)
.attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")"; })
.on("click", function(d) { return this.zoom(this.node == d.parent ? this.root : d.parent); })
.style("border",'black');
var borderPath = this.svg.append("rect")
.attr("x", this.marginTree.left)
.attr("y", this.marginTree.top)
.attr("height", this.h - this.marginTree.top - this.marginTree.bottom )
.attr("width", this.w - this.marginTree.left - this.marginTree.right)
.style("stroke", 'darkgrey')
.style("fill", "none")
.style("stroke-width", '3px');
cell.append("svg:rect")
.attr("id", function(d,i) { return "rect-" + (i+1); })
.attr("class","highlighting2")
.attr("title", function(d) {return (d.name+", "+d.size);})
.attr("data-original-title", function(d) {return (d.name+",\n "+d.size);})
.attr("width", function(d) { return d.dx - 1; })
.attr("height", function(d) { return d.dy ; })
.on('mouseover', this.tip.show)
.on('mouseout', this.tip.hide)
.style("fill", function(d) {return coloring(d.color);});
cell.append("svg:text")
.attr("class", "treemap-text nameTexts")
.attr("id", function(d,i) { return "name-" + (i+1); })
.attr("x", cellMargin)
.attr("y", function(d) { return parseInt($('.treemap-text').css('font-size'))+cellMargin; })
.text(function(d) {return (d.name);});
cell.append("svg:text")
.attr("class", "treemap-text sizeTexts")
.attr("id", function(d,i) { return "size-" + (i+1); })
.attr("x", cellMargin)
.attr("y", function(d) { return 2*parseInt($('.treemap-text').css('font-size'))+2*cellMargin; })
.text(function(d) {return (d.size);});
另外,我考慮過要在每個rect元素周圍創建線並繪制四條線,但想知道是否有更簡單的方法。 謝謝。
我沒有完全檢查您的來源,與jsbin,codepen,jsfiddle或其他在線平台一起使用也可以幫助您顯示問題。
實際上,我認為您只是誤解了SVG表示屬性及其使用CSS的樣式。 對於SVG元素,只有SVG表示屬性在CSS中有效。 這意味着您的代碼中沒有邊框屬性。 還要注意,對於<text>
元素,填充顏色是字體-主體顏色,筆觸是字體的輪廓。 考慮到筆觸和填充是繼承到子元素的,這意味着,如果您有一個帶有筆觸樣式的矩形,並且包含一些包含文本元素的矩形,則它們會將筆觸應用為輪廓線,並且您需要覆蓋那里的樣式。
希望您能解決您的問題。
干杯G園
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.