Question

我正在尝试在Google Datastudio中设置散点图，而传统的d3.js在Google Data Studio可视化js文件中不起作用。我已经能够加载圆，但是我很努力地使用d3.js代码在比例尺上绘制圆。

我如何使用下面的d3.js代码在Google Data Studio中工作

xScale = d3.scale.linear().range([0, width]),
xAxis = d3.svg.axis().scale(xScale).orient("bottom");

我已经可以使用下面的代码获取数据并绘制圆，但是比例尺和轴丢失了。

/// create a title element
var titleElement = document.createElement('div');
titleElement.id = 'myVizTitle';
document.body.appendChild(titleElement);

function drawViz(data) {
  let rowData = data.tables.DEFAULT;

  // set margins + canvas size
  const margin = { top: 10, bottom: 50, right: 10, left: 10 };
  const padding = { top: 15, bottom: 15 };
  const height = dscc.getHeight() - margin.top - margin.bottom;
  const width = dscc.getWidth() - margin.left - margin.right;

  const fillColor =  data.style.barColor.value
  ? data.style.barColor.value.color
  : data.style.barColor.defaultValue;

  // remove the svg if it already exists
  if (document.querySelector("svg")) {
    let oldSvg = document.querySelector("svg");
    oldSvg.parentNode.removeChild(oldSvg);
  }

  const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
  svg.setAttribute("height", `${height}px`);
  svg.setAttribute("width", `${width}px`);

  const maxBarHeight = height - padding.top - padding.bottom;
  const barWidth = width / (rowData.length * 2);

  // obtain the maximum bar metric value for scaling purposes
    let xlargestMetric = 0;
    let ylargestMetric = 0;

  rowData.forEach(function (row) {
    xlargestMetric = Math.max(xlargestMetric, row["barMetric"][0]);
  });

  rowData.forEach(function (row) {
    ylargestMetric = Math.max(ylargestMetric, row["barMetric"][1]);
  });


  rowData.forEach(function (row, i) {
    // 'barDimension' and 'barMetric' come from the id defined in myViz.json
    // 'dimId' is Data Studio's unique field ID, used for the filter interaction
    const barData = {
      dim: row["barDimension"][0],
      met: row["barMetric"][0],
      met2: row["barMetric"][1],
      dimId: data.fields["barDimension"][0].id
    };

    // create the "circle"
    let circle = document.createElementNS("http://www.w3.org/2000/svg", "circle");
        circle.setAttribute("r", 3.5);
    circle.setAttribute("cx", barData["met"]);
    circle.setAttribute("cy", barData["met2"]);
    circle.style.fill = fillColor;

    svg.appendChild(circle);
  });

  document.body.appendChild(svg);


}

dscc.subscribeToData(drawViz, { transform: dscc.objectTransform });

Answer 1

在您提供的d3代码中，您创建了比例和轴，但未调用轴功能。例如：

svg
  .append("g")
    .call(xAxis);

参考：d3-axis API reference

更广泛地讲-如果要在Data Studio社区可视化中使用d3.js代码，则需要在上载到Data Studio的JavaScript中包含d3.js代码。您可以使用bash脚本连接文件，也可以使用npm构建文件。 This heatmap使用npm和webpack包含d3.js并将其用于社区可视化。

使用Google Datastudio中的d3.js代码绘制比例尺和轴以进行散点图

1 个答案: