
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Love-shaped Word Cloud</title>
<script src="https://d3js.org/d3.v6.min.js"></script>
<script src="./d3.layout.cloud.js"></script>
<style>
text {
font-family: "Arial", sans-serif;
font-size: 20px;
fill: red;
}
</style>
</head>
<body>
<svg width="800" height="600">
<defs>
<clipPath id="heart">
<path d="M400,150
Q400,50 300,50
Q225,50 225,125
Q225,50 150,50
Q50,50 50,150
Q50,225 150,325
L400,600
L650,325
Q750,225 750,150
Q750,50 650,50
Q550,50 550,125
Q550,50 475,50
Q400,50 400,150
Z" />
</clipPath>
</defs>
<g clip-path="url(#heart)">
<g id="wordcloud"></g>
</g>
</svg>
<script>
var data = [
{
text: "女朋友", size: 18},
{
text: "女朋友", size: 7},
{
text: "女朋友", size: 5},
{
text: "女朋友", size: 3},
{
text: "女朋友", size: 4},
{
text: "女朋友", size: 5},
{
text: "女朋友", size: 6},
{
text: "女朋友", size: 7},
{
text: "女朋友", size: 2},
{
text: "女朋友", size: 3},
{
text: "女朋友", size: 4},
{
text: "女朋友", size: 8},
{
text: "女朋友", size: 6},
{
text: "女朋友", size: 7},
{
text: "女朋友", size: 2},
{
text: "女朋友", size: 8},
{
text: "女朋友", size: 4},
{
text: "女朋友", size: 5},
{
text: "女朋友", size: 6},
{
text: "女朋友", size: 7},
{
text: "女朋友", size: 8},
{
text: "女朋友", size: 3},
{
text: "女朋友", size: 4},
{
text: "女朋友", size: 5},
{
text: "女朋友", size: 6},
{
text: "女朋友", size: 7},
{
text: "女朋友", size: 2},
{
text: "女朋友", size: 3},
{
text: "女朋友", size: 4},
{
text: "女朋友", size: 5},
{
text: "女朋友", size: 6},
{
text: "女朋友", size: 2},
{
text: "女朋友", size: 3},
{
text: "女朋友", size: 4},
{
text: "女朋友", size: 5},
{
text: "女朋友", size: 6},
{
text: "女朋友", size: 2},
{
text: "女朋友", size: 3},
{
text: "女朋友", size: 4},
{
text: "女朋友", size: 5},
{
text: "女朋友", size: 6},
{
text: "女朋友", size: 2},
{
text: "女朋友", size: 3},
{
text: "女朋友", size: 4},
{
text: "女朋友", size: 5},
{
text: "女朋友", size: 6},
{
text: "女朋友", size: 2},
{
text: "女朋友", size: 3},
{
text: "女朋友", size: 4},
{
text: "女朋友", size: 5},
{
text: "女朋友", size: 6},
{
text: "女朋友", size: 2