安装d3和d3-cloud和ts环境

林强181

已于 2023-05-31 17:36:32 修改

阅读量512

点赞数

文章标签： npm vue.js node.js

于 2023-05-31 15:43:50 首次发布

本文链接：https://blog.csdn.net/qlin_11/article/details/130970498

版权

文章讲述了在TypeScript环境下安装d3和d3-cloud库时需要额外安装@types/d3和@types/d3-cloud以避免打包问题。在使用d3.layout.cloud()时遇到问题，需通过cloud.default()来调用。文中给出了一个词云渲染的示例代码，涉及数据处理、尺寸计算和SVG渲染。

摘要由CSDN通过智能技术生成

安装d3和d3-cloud
对于ts的环境需要在install d3之后需要安装@types/d3
不然不能打包

使用时有个大坑，就是调用cloud时，得 var designLayout = cloud.default();
这么调用，我也是奇了怪了。（还有cloud（）和d3.layout.cloud()，这两个在我的项目中不生效。）

npm i d3
npm i --save-dev @types/d3
npm i d3-cloud
npm i --save-dev @types/d3-cloud

// line大类图元的父类option

import * as d3 from "d3";
import * as cloud from "d3-cloud";

// 绑定事件，处理数据，并渲染
function dealOption(option, pelInstance) {
  console.log(cloud, "cloud", d3);
  let editParam = null;

  let dealState = true;


  // // 数组，有多个值（暂时记录）
  var wordData = [];
  let gaugeDataIndex = getIndex(tableName, gaugeData[0].name, resultData);
  gaugeTableData.forEach((item) => {
    if (typeof item[sizeIndex] == "string") {
      wordData.push({
        text: item[gaugeDataIndex],
        size: Number(item[sizeIndex]),
      });
    } else {
      wordData.push({ text: item[gaugeDataIndex], size: item[sizeIndex] });
    }
  });
//  container是dom，这里没有定义。
  var domWidth = container.clientWidth;
  var domHeight =container.clientHeight;

  const data =
   [
     { text: "apple", size: 320 },
     { text: "orange", size: 24 },
    { text: "banana", size: 16 },
     { text: "watermelon", size: 80 },
    { text: "grape", size: 40 },
   ];
  var dataset = [];
  for (var i = 0; i < data.length; i++) {
    if (data[i].hasOwnProperty("size")) {
      dataset.push(data[i].size);
    }
  }
  var min = d3.min(dataset); //得到最小值
  var max = d3.max(dataset); //得到最大值

  var scaleLinear = d3.scaleLinear().domain([min, max]).range([18, 50]);

  var designLayout = cloud.default();
  const layout = designLayout
    .size([domWidth, domHeight])
    .words(data)
    .padding(5)
    .rotate(function () {
      return ~~(Math.random() * 2) * 90;
    })
    .font("Impact")
    .fontSize(function (d) {
      return scaleLinear(d.size);
    })
    .on("end", draw);

  layout.start();

  function draw(words) {
    d3.select(option.pretreatment.initArgs.container)
      .append("svg")
      .attr("width", layout.size()[0])
      .attr("height", layout.size()[1])
      .append("g")
      .attr(
        "transform",
        "translate(" + layout.size()[0] / 2 + "," + layout.size()[1] / 2 + ")"
      )
      .selectAll("text")
      .data(words)
      .enter()
      .append("text")
      .style("font-size", function (d) {
        return scaleLinear(d.size) + "px";
      })
      .style("font-family", "Impact")
      .style("fill", function (d, i) {
        return d3.schemeCategory10[i % 10];
      })
      .attr("text-anchor", "middle")
      .attr("transform", function (d) {
        return "translate(" + [d.x, d.y] + ")rotate(" + d.rotate + ")";
      })
      .text(function (d) {
        return d.text;
      });
  }
  return dealState;
}

export { dealOption };