将图像图标裁剪成圆形

Question

我正在使用AMCharts Force-Directed Network。

我已经为每个节点添加了一个自定义图像，现在，我正在尝试将图像裁剪成一个圆圈。通常，我会使用 border-radius: 50% 但这似乎不会影响 SVG image 元素。

AMCharts 支持这个吗？我可以使用 CSS 吗？还是我需要使用 Javascript 和 ready 事件？

这是JSfiddle

/**
 * ---------------------------------------
 * This demo was created using amCharts 4.
 * 
 * For more information visit:
 * https://www.amcharts.com/
 * 
 * Documentation is available at:
 * https://www.amcharts.com/docs/v4/
 * ---------------------------------------
 */

// Themes begin
//am4core.useTheme(am4themes_moonrisekingdom);
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);

var networkSeries = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries())
networkSeries.dataFields.linkWith = "linkWith";
networkSeries.dataFields.name = "name";
networkSeries.dataFields.id = "name";
networkSeries.dataFields.value = "value";
networkSeries.dataFields.children = "children";

networkSeries.nodes.template.label.text = "{name}"
networkSeries.fontSize = 16;
networkSeries.linkWithStrength = 0;

var nodeTemplate = networkSeries.nodes.template;
nodeTemplate.tooltipText = "{name}";
nodeTemplate.fillOpacity = 1;
nodeTemplate.label.hideOversized = true;
nodeTemplate.label.truncate = true;

var icon = nodeTemplate.createChild(am4core.Image);
icon.propertyFields.href = "image";
icon.horizontalCenter = "middle";
icon.verticalCenter = "middle";
icon.width = 70;
icon.height = 70;

var linkTemplate = networkSeries.links.template;
linkTemplate.strokeWidth = 1;
var linkHoverState = linkTemplate.states.create("hover");
linkHoverState.properties.strokeOpacity = 1;
linkHoverState.properties.strokeWidth = 2;

networkSeries.data = [{
  "name": "Some Text",
  "image": "https://live.staticflickr.com/446/32478802896_79554c84e8_b.jpg",
  "value": 500,
}, ];

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 100vh;
}

image {
  border-radius: 50%;
}

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/moonrisekingdom.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<div id="chartdiv"></div>

Answer 1

您可以使用Bullets plugin 并在节点内创建一个 PinBullet 来屏蔽您的图像：

// requires bullets.js to be included: https://www.amcharts.com/lib/4/plugins/bullets.js"

// optional: disable node circles around image. 
// See: https://www.amcharts.com/docs/v4/chart-types/force-directed/#Disabling_circles
nodeTemplate.circle.disabled = true;
nodeTemplate.outerCircle.disabled = true;

// use bullet plugin to create masked image in node
var icon = nodeTemplate.createChild(am4plugins_bullets.PinBullet);
icon.image = new am4core.Image();
icon.image.propertyFields.href = "image";
icon.circle.radius = am4core.percent(100);
icon.circle.strokeWidth = 0;
icon.background.pointerLength = 0;
icon.background.disabled = true;

更新的演示：

// Themes begin
am4core.useTheme(am4themes_moonrisekingdom);
am4core.useTheme(am4themes_animated);
// Themes end

var chart = am4core.create("chartdiv", am4plugins_forceDirected.ForceDirectedTree);

var networkSeries = chart.series.push(new am4plugins_forceDirected.ForceDirectedSeries())
networkSeries.dataFields.linkWith = "linkWith";
networkSeries.dataFields.name = "name";
networkSeries.dataFields.id = "name";
networkSeries.dataFields.value = "value";
networkSeries.dataFields.children = "children";

networkSeries.nodes.template.label.text = "{name}"
networkSeries.fontSize = 16;
networkSeries.linkWithStrength = 0;

var nodeTemplate = networkSeries.nodes.template;
nodeTemplate.tooltipText = "{name}";
nodeTemplate.fillOpacity = 1;
nodeTemplate.label.hideOversized = true;
nodeTemplate.label.truncate = true;


// requires bullets.js to be included: https://www.amcharts.com/lib/4/plugins/bullets.js"
// optional: disable node circles around image. 
// See: https://www.amcharts.com/docs/v4/chart-types/force-directed/#Disabling_circles
nodeTemplate.circle.disabled = true;
nodeTemplate.outerCircle.disabled = true;

// use bullet plugin to create masked image in node
var icon = nodeTemplate.createChild(am4plugins_bullets.PinBullet);
icon.image = new am4core.Image();
icon.image.propertyFields.href = "image";
icon.circle.radius = am4core.percent(100);
icon.circle.strokeWidth = 0;
icon.background.pointerLength = 0;
icon.background.disabled = true;

var linkTemplate = networkSeries.links.template;
linkTemplate.strokeWidth = 1;
var linkHoverState = linkTemplate.states.create("hover");
linkHoverState.properties.strokeOpacity = 1;
linkHoverState.properties.strokeWidth = 2;

networkSeries.data = [{
  "name": "Some Text",
  "image": "https://live.staticflickr.com/446/32478802896_79554c84e8_b.jpg",
  "value": 50,
}, ];

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
}

#chartdiv {
  width: 100%;
  height: 100vh;
}

image {
  border-radius: 50%;
}

<script src="https://www.amcharts.com/lib/4/core.js"></script>
<script src="https://www.amcharts.com/lib/4/charts.js"></script>
<script src="https://www.amcharts.com/lib/4/plugins/forceDirected.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/moonrisekingdom.js"></script>
<script src="https://www.amcharts.com/lib/4/themes/animated.js"></script>
<script src="https://www.amcharts.com/lib/4/plugins/bullets.js"></script>
<div id="chartdiv"></div>