Question

你知道如何在d3.js中证明多行文字覆盖的tspan标签吗？我有一个描述块，其中包含.json文件的文本：

这是我尝试过的。我尝试将text-anchor设置为justify，因为<tspan>元素没有text-align。所以d3js正在生成此代码。

＆＃13;

let infoBox = d3.select("#info-box")
  .append("svg:svg")
  .attr("id", "info-box-text")
  .append("g")
  .attr("class", "info-box")
  .append("text")
  .attr("x", 0)
  .attr("y", 30)
  .attr("transform", "translate(125)"); //text-anchor center

＆＃13;

.info-box text {
  /*description style*/
  font-size: 18px;
  font-family: Open Sans, Arial, Helvetica, Tahoma, Calibri, sans-serif;
  fill: #7c7c7c;
}

.info-box text tspan {
  padding: 20px;
}

#info-box svg {
  float: left;
  margin-left: 50px;
  width: 250px;
  height: 600px;
  text-anchor: middle;
}

＆＃13;

<script src="https://d3js.org/d3.v3.min.js"></script>
<svg id="info-box-text">
          <g class="info-box">
            <text x="0" y="30" transform="translate(125)">
              <tspan x="0" y="30" dy="0em">Lorem ipsum</tspan>
              <tspan x="0" y="30" dy="1.1em">dolor sit amet, consectetur</tspan>
              <tspan x="0" y="30" dy="2.2em">adipiscing elit</tspan>                    
           </text>
         </g>
        </svg>

＆＃13;

如何证明多行文字在d3.js中涵盖了tspan标签？

0 个答案: