我在 D3.js 中創建了一個條形圖,并用<pattern>
. 現在,我想將條形圖保存到 .svg 檔案中。我遵循了
我從當前代碼中得到的是一個 svg 檔案,如下所示:
先感謝您。
uj5u.com熱心網友回復:
將模式放在與條形圖相同的 svg 中,即使用一個 svg 元素,而不是兩個。
var btn = document.getElementById("btn");
var rotateRect = document.getElementById("rotateRect");
var data = [{ year: '2001', value:10 },
{ year: '2002', value:30 },
{ year: '2003', value:20 },
]
var svg = d3.select("svg#barchart"),
margin = 200,
width = svg.attr("width") - margin,
height = svg.attr("height") - margin
var xScale = d3.scaleBand().range([0, width]).padding(0.4),
yScale = d3.scaleLinear().range([height, 0]);
var g = svg.append("g")
.attr("transform", "translate(" 100 "," 100 ")");
xScale.domain(data.map(function(d) { return d.year; }));
yScale.domain([0, d3.max(data, function(d) { return d.value; })]);
g.append("g")
.attr("transform", "translate(0," height ")")
.call(d3.axisBottom(xScale));
g.append("g")
.call(d3.axisLeft(yScale).tickFormat(function(d){
return d;
}).ticks(10));
g.selectAll(".bar")
.data(data)
.enter().append("rect")
.attr("class", "bar")
.attr("x", function(d) { return xScale(d.year); })
.attr("y", function(d) { return yScale(d.value); })
.attr("width", xScale.bandwidth())
.attr("height", function(d) { return height - yScale(d.value); })
.attr('stroke', "black")
.attr('stroke-width', '1')
// .attr("fill", "white")
.attr("fill", function(d,i) { return "url(#pattern" (i 1) ")"});
btn.onclick = function(){
console.log("save svg")
var svgData = $("#barchart")[0].outerHTML;
console.log(svgData);
var svgBlob = new Blob([svgData], {type:"image/svg xml;charset=utf-8"});
var svgUrl = URL.createObjectURL(svgBlob);
var downloadLink = document.createElement("a");
downloadLink.href = svgUrl;
downloadLink.download = "new.svg";
document.body.appendChild(downloadLink);
downloadLink.click();
document.body.removeChild(downloadLink);
}
#rotateRect{
transform:rotate(45deg);
transform-origin: center center;
transform-box: fill-box;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="https://d3js.org/d3.v4.min.js"></script>
<svg id = "barchart" width="600" height="500"> <defs>
<pattern id="pattern1"
x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" >
<!-- <circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff" /> -->
<rect id="rotateRect" x="5" y = "5" width = "10" height = "10" />
</pattern>
</defs>
<defs>
<pattern id="pattern2"
x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="5" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
<defs>
<pattern id="pattern3"
x="0" y="0" width="20" height="20"
patternUnits="userSpaceOnUse" >
<circle cx="10" cy="10" r="3" style="stroke: none; fill: #0000ff" />
</pattern>
</defs>
</svg>
<button id="btn">Save SVG</button>
轉載請註明出處,本文鏈接:https://www.uj5u.com/houduan/504325.html
標籤:javascript html css svg d3.js
下一篇:有沒有辦法從CSV中獲取資料,其中半徑是從json檔案形成的,以便可以根據單擊按鈕使用CSV資料調整Bubble的大小?