Построение масштабов и осей с использованием кода d3.js в Google Datastudio для точечной диаграммы - PullRequest
Новая
       15

Построение масштабов и осей с использованием кода d3.js в Google Datastudio для точечной диаграммы

0 голосов
/ 14 мая 2019

Я пытаюсь настроить точечный график в gat datastudio, и традиционный d3.js не работает в js-файле визуализации студии данных Google.Мне удалось заставить круги загружаться, однако я борюсь с построением кругов на весах, используя код 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 });

1 Ответ

0 голосов
/ 25 мая 2019

В предоставленном вами коде d3 вы создали шкалы и оси, но функция осей не была вызвана. Например: 

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

Ссылка: Справочник по оси d3

В более широком смысле - если вы хотите использовать код d3.js в визуализациях сообщества Data Studio, вам необходимо включить код d3.js в JavaScript, который вы загружаете в Data Studio. Вы можете объединить файлы, используя скрипт bash, или использовать их сборку, используя npm. Эта тепловая карта использует npm и веб-пакет для включения d3.js и использования его в визуализации сообщества.

...