Question

我正在制作一个散点图，并为图中的每个圆圈提取图像填充。问题是图像是PNG的透明背景。这意味着我的重叠圆圈相互显示：

在这里看到 - http://i.stack.imgur.com/bphon.png

我尝试使用CSS设置背景颜色，但它似乎被JS中的.style（“fill”）完全覆盖。我希望能够提供30个图像，因此我不想将它们全部保存起来以便能够使用我的CSS加载图像。

所以，我的问题是，有没有办法在我的PNG后面放置一个白色背景，同时从我的数据集中包含的URL中提取这些PNG？

感谢您的帮助

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title></title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
<style type="text/css">

.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis-text {
    font-family: sans-serif;
    font-size: 11px;
    background-color: white;
    font-weight: bold;
}

.teamcircle {
    background-color: white;   
}

</style>
</head>
<body>
<div>
<input type="button" id="playerbtn" value="See Player View">
<input type="button" id="teambtn" value="See Team View">
</div>

<div id="data">
    <div id="player-circles">
    </div>
</div>

<script type="text/javascript">

//Width and height
var margin = {top: 50, right: 20, bottom: 30, left: 40};
var w = 960 - margin.left - margin.right;
var h = 500 - margin.top - margin.bottom;

//Create scale functions
var xScale = d3.scale.linear()
    .range([0, w]);

var yScale = d3.scale.linear()
    .range([h, 0]);

// var color = d3.scale.color();

// Define the Axis
var xAxis = d3.svg.axis()
    .scale(xScale)
    .orient("bottom");

var yAxis = d3.svg.axis()
    .scale(yScale)
    .orient("left");

//Create SVG element
var svg = d3.select("body")
            .append("svg")
            .attr("width", w + margin.left + margin.right)
            .attr("height", h + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");


//Load the TEAM data set
var teamdata = d3.tsv("team.tsv", function(error, teamdata) {
  if (error) throw error;

  teamdata.forEach(function(d) {
    d.entriesper60 = +d.entriesper60;
    d.carryinpercent = +d.carryinpercent;
  });

  xScale.domain(d3.extent(teamdata, function(d) { return d.carryinpercent; })).nice();
  yScale.domain(d3.extent(teamdata, function(d) { return d.entriesper60; })).nice();

//Create X axis
svg.append("g")
      .attr("class", "x axis")
      .attr("transform", "translate(0," + h + ")")
      .call(xAxis)
    .append("text")
      .attr("class", "axis-text")
      .attr("x", w)
      .attr("y", -6)
      .style("text-anchor", "end")
      .text("Carry-in %");

//Create Y axis
svg.append("g")
    .attr("class", "y axis")
    .call(yAxis)
  .append("text")
    .attr("class", "axis-text")
    .attr("y", -20)
    .attr("z", 0)
    .style("text-anchor", "middle")
    .text("Entries/60")

// DEFS & Pattern for images
svg.append("defs")
  .selectAll("pattern")
  .data(teamdata)
  .enter()
  .append("pattern")
  .attr('id', function(d, i) {
    return d.name;
  })
 // .attr('patternUnits', 'userSpaceOnUse')
  .attr('width', 20)
  .attr('height', 20)
  .append("image")
  .attr("xlink:href", function(d) {
    return d.image + d.name;
  })
  .attr('width', 20)
  .attr('height', 20)
  .attr("transform", "translate(2, 2)");

// Create TEAM Circles
svg.selectAll("circle")
  .data(teamdata)
  .enter()
  .append("circle")
  .attr("class", "teamcircle")
  .style("stroke", function(d) { return d.hex; })     
  .style("stroke-width", 2)
  .style("stroke-opacity", .8)
  .attr("r", 12)
  .attr("cx", function(d) { return xScale(d.carryinpercent); })
  .attr("cy", function(d) { return yScale(d.entriesper60); })
 .attr("fill", function(d) { return "url(#" + d.name + ")"; 
});
});
  
  </script>
</body>
</html>

Answer 1

我能想到的最好的方法是为每个圆圈创建一个组，然后创建一个白色背景的圆圈。像这样：

var teamCircle = svg.selectAll("g.teamcircle")
  .data(teamdata)
  .enter()
  .append("g")
  .attr("class", "teamcircle")
  .transform(function(d){return "translate(" + xScale(d.carryinpercent) + "," +  yScale(d.entriesper60) + ")"});

teamCircle.append("circle")
.attr("fill", "white")
.attr("r", 12)

teamCircle.append("circle")
  .style("stroke", function(d) { return d.hex; })     
  .style("stroke-width", 2)
  .style("stroke-opacity", .8)
  .attr("r", 12)
 .attr("fill", function(d) { return "url(#" + d.name + ")";

当从我的D3.js数据集中提取图像URL时，如何在PNG后面添加背景颜色？

1 个答案: