How to integrate with d3 library through ui-model
Tags:
Authors:Zhicheng Wang
<svg height="202px" version="1.1" viewBox="0 0 202 202" width="202px" xmlns="http://www.w3.org/2000/svg">
<g fill="none" fill-rule="evenodd" stroke="none" stroke-width="1">
<g>
<circle cx="100" cy="100" fill="#CCCCCC" fill-rule="nonzero" r="99.8284734" stroke="#000000"
stroke-width="0.5"></circle>
<circle cx="100" cy="100" fill="#FFFFFF" fill-rule="nonzero" r="89.8456261" stroke="#E0E0E0"
stroke-width="2"></circle>
<path
d="M201.748535,102.867916 C183.082426,110.599672 162.270041,111.417393 143.054847,105.173998 L149.224586,86.1854935 C163.918558,90.9598544 179.833911,90.3345385 194.107995,84.4220196 L201.748535,102.867916 Z"
fill="#FF9900" fill-rule="nonzero"
transform="translate(172.401691, 96.874547) rotate(-90.000000) translate(-172.401691, -96.874547) "></path>
<path
d="M177.097049,157.435336 C164.36157,153.297328 152.786237,146.203955 143.317458,136.735176 L157.435336,122.617298 C164.676167,129.858129 173.527892,135.282473 183.266788,138.446832 L177.097049,157.435336 Z"
fill="#DC3912" fill-rule="nonzero"
transform="translate(163.292123, 140.026317) rotate(-90.000000) translate(-163.292123, -140.026317) "></path>
<text fill="#333333" font-family="Helvetica" font-size="12" font-weight="normal">
<tspan text-anchor="middle" x="88.1080938" y="56.1955318">CPU</tspan>
</text>
<path d="M36.1616755,139.120176 L27.6498989,144.336199" fill="#000000" fill-rule="nonzero"
stroke="#666666"></path>
<path d="M28.7931099,123.136521 L19.2988579,126.221391" fill="#000000" fill-rule="nonzero"
stroke="#666666"></path>
<path d="M25.3594483,105.874339 L15.4073748,106.657584" fill="#000000" fill-rule="nonzero"
stroke="#666666"></path>
<path d="M26.0504356,88.2875396 L16.1904936,86.7258782" fill="#000000" fill-rule="nonzero"
stroke="#666666"></path>
<path d="M50.5874266,149.412573 L39.9990181,160.000982" fill="#000000" fill-rule="nonzero"
stroke="#333333" stroke-width="2"></path>
<text fill="#333333" font-family="Helvetica" font-size="7" font-weight="normal">
<tspan x="58.8651687" y="149">0</tspan>
</text>
<path d="M39.4278014,55.9917217 L31.3515082,50.1239512" fill="#000000" fill-rule="nonzero"
stroke="#666666"></path>
<path d="M51.3749446,43.067375 L44.8916039,35.4763583" fill="#000000" fill-rule="nonzero"
stroke="#666666"></path>
<path d="M66.0091161,33.2891342 L61.4769982,24.3943521" fill="#000000" fill-rule="nonzero"
stroke="#666666"></path>
<path d="M82.5216293,27.1973464 L80.1911798,17.490326" fill="#000000" fill-rule="nonzero"
stroke="#666666"></path>
<path d="M35.4393617,73.258108 L21.6049392,67.5277026" fill="#000000" fill-rule="nonzero"
stroke="#333333" stroke-width="2"></path>
<path d="M117.478371,27.1973464 L119.80882,17.490326" fill="#000000" fill-rule="nonzero"
stroke="#666666"></path>
<path d="M133.990884,33.2891342 L138.523002,24.3943521" fill="#000000" fill-rule="nonzero"
stroke="#666666"></path>
<path d="M148.625055,43.067375 L155.108396,35.4763583" fill="#000000" fill-rule="nonzero"
stroke="#666666"></path>
<path d="M160.572199,55.9917217 L168.648492,50.1239512" fill="#000000" fill-rule="nonzero"
stroke="#666666"></path>
<path d="M100,30.1200686 L100,15.1457976" fill="#000000" fill-rule="nonzero" stroke="#333333"
stroke-width="2"></path>
<path d="M173.949564,88.2875396 L183.809506,86.7258782" fill="#000000" fill-rule="nonzero"
stroke="#666666"></path>
<path d="M174.640552,105.874339 L184.592625,106.657584" fill="#000000" fill-rule="nonzero"
stroke="#666666"></path>
<path d="M171.20689,123.136521 L180.701142,126.221391" fill="#000000" fill-rule="nonzero"
stroke="#666666"></path>
<path d="M163.838324,139.120176 L172.350101,144.336199" fill="#000000" fill-rule="nonzero"
stroke="#666666"></path>
<path d="M164.560638,73.258108 L178.395061,67.5277026" fill="#000000" fill-rule="nonzero"
stroke="#333333" stroke-width="2"></path>
<path d="M149.412573,149.412573 L160.000982,160.000982" fill="#000000" fill-rule="nonzero"
stroke="#333333" stroke-width="2"></path>
<text fill="#333333" font-family="Helvetica" font-size="7" font-weight="normal">
<tspan x="128.595506" y="149">100</tspan>
</text>
</g>
<path attr.transform="rotate({{rotateAngle}})"
class="pointer"
d="M100,17 C100,17 100,17 99.3043478,29.1527868 C98.6086957,41.3055735 97.2173913,65.6111471 96.5217391,81.4602471 C95.826087,97.3093471 95.826087,104.701974 96.5217391,111.162206 C97.2173913,117.622438 98.6086957,123.150276 100,123.150276 C101.391304,123.150276 102.782609,117.622438 103.478261,111.162206 C104.173913,104.701974 104.173913,97.3093471 103.478261,81.4602471 C102.782609,65.6111471 101.391304,41.3055735 100.695652,29.1527868 C100,17 100,17 100,17"
fill="#DC3912" fill-opacity="0.7" fill-rule="nonzero"
stroke="#C63310"
></path>
<circle cx="100" cy="100" fill="#4684EE" fill-rule="nonzero" r="10" stroke="#666666"></circle>
<text fill="#000000">
<tspan text-anchor="middle" x="97.2053131" y="150">{{value}}</tspan>
</text>
</g>
</svg>
<label class="d-block">
Percent:
<input type="number" class="form-control" step="10" [(ngModel)]="value">
</label>