D3.js learning

Vue in Introduce the use of D3.js_ Blog to work hard tomorrow -CSDN Blog _d3.js vue

Learn first , Follow up

<template>
<div class="full" style="background-color: #d2d2d2;padding:30px;text-align: center;">
  <svg class="svg_pane" width="200" height="200"  viewBox="0 0 200 200">
    <rect x="50" y="50" width="100" height="100" fill="yellow" stroke-linejoin="round"  rx="5" ry="5" ></rect>
    <circle cx="100" cy="100" r="20" fill="green"></circle>

  </svg>
  <svg class="svg_pane"  width="200" height="200">
    <polyline
        points="50,10 80,90 10,30 90,30 20,90"
        stroke="#fb3"
        stroke-width="3"
        fill="black">
    </polyline>
  </svg>

  <svg class="svg_pane"  width="200" height="200">
    <polygon
        points="50,10 80,90 10,30 90,30 20,90"
        stroke="#fb3"
        stroke-width="3"
        fill="transparent">
    </polygon>
  </svg>
  <svg class="svg_pane"  width="200" height="200">
    <path d="M 10 10 L 180 180  C40,5 40,140 100,100 " stroke="#fb3" stroke-width="4" fill="transparent"></path>
  </svg>
  <svg class="svg_pane"  width="200" height="200">
    <rect x="0" y="0" width="100" height="100" fill="#feac5e">
      <animate attributeName="x" from="-100" to="200" dur="2s" repeatCount="indefinite" />
    </rect>
  </svg>


</div>
</template>

<script>
export default {
  name: "D3Example",





}
</script>

<style scoped>
.svg_pane{
  background-color: white;
  box-shadow: 2px 2px 5px 5px #828282;
  margin-right: 10px;
}
</style>