Question

我正在尝试使用d3创建一个热图。我已经创建了轴和比例尺，但是我对如何绘制矩形感到困惑。我使用内置的比例函数从矩形获取x和y点，例如

onclick="PF('auditDataVar').addRow();"

但是问题在于计算每个矩形的宽度和高度。我不知道如何计算。到目前为止，我正在使用

<p:menuitem value="Insert row" icon="fa fa-plus" 
                              actionListener="#{auditBean.insertRow()}" 
                              oncomplete="PF('auditDataVar').addRow();" />

<p:dataTable id="auditData" widgetVar="auditDataVar" var="aud" scrollable="true" scrollHeight="460" scrollWidth="1900" resizableColumns="true" value="#{auditBean.audits}" editable="true" paginator="true" paginatorTemplate="{CurrentPageReport} {FirstPageLink} {PreviousPageLink} {PageLinks} {NextPageLink} {LastPageLink}" paginatorPosition="bottom"
                               selection="#{auditBean.selectedAudit}" selectionMode="single"  rowKey="#{aud.accountabilityElementId}_#{aud.comboRowKey}" rows="100" lazy="true" emptyMessage="No audits found">

设置高度和宽度，但无法正常工作。我知道另一种方法是使用：

        public void insertRow() {
        selectedItem = new AccountabilityAuditEntity();
         selectedItem.setComboRowKey(insertCount + 1); //to set rowkey for new row
        if (lazyAudit.getEntries() != null) {
            lazyAudit.getEntries().add(selectedItem); 
            lazyAudit.setRowCount(lazyAudit.getRowCount()+1); 
        } else {
            AccountabilityAuditEntity newAudit = new AccountabilityAuditEntity();
            newAudit.setComboRowKey(insertCount + 1);
            auditDetailData.add(newAudit);
            lazyAudit.setEntries(auditDetailData);//setting ArrayList to lazymodel
            lazyAudit.setRowCount(1);
        }
        insertCount++;

        audits = lazyAudit; //list audits is used by the datatable 
        selectedAudit = null;
    }

但要避免这种情况。

您可以找到我到目前为止编写/复制的代码here

attr('x', d => {
    return timeScale(d.hour);
  })
  .attr('y', d => {
    return dayScale(d.day);
  })

Answer 1

如果使用d3.scaleBand（），则可以在比例尺本身内设置填充，然后访问scale.bandwidth作为条形的宽度和高度。

由于该比例是“常规”比例，因此您需要提供域中的每个类别（例如，天数）。

有关示例，请参见链接：

https://codepen.io/tomshanley/pen/ejWzYZ?editors=0010#0

代码的相关部分是：

var dayScale = d3.scaleBand()
  .domain(d3.range(7,0,-1))
  .range([height, 0])
  .padding(0.4);

var dayAxis = d3.axisLeft().ticks(7).scale(dayScale)
svg.append('g').attr('class', 'xAxis').call(dayAxis)

var timeScale = d3.scaleBand()
  .domain(d3.range(1,25,1))
  .range([0, width])
  .padding(0.1)

var timeAxis = d3.axisTop().scale(timeScale).ticks(24)
svg.append('g').attr('class', 'yAxis').call(timeAxis)

svg.selectAll('.squares')
  .data(dataset)
  .enter()
  .append('rect')
  .attr('x', d => {
    return timeScale(d.hour);
  })
  .attr('y', d => {
    return dayScale(d.day);
  })
  .attr('width', timeScale.bandwidth())
  .attr('height', dayScale.bandwidth())
  .style('fill', d => colorScale(d.value))

如何计算d3.js热图的矩形大小

1 个答案: