Vega-Lite热力图文本属性调整及无间距温度图实现求助

Hey there! Let's work through your Vega-Lite questions step by step:

1. Fixing Text Font Size & Position Issues #

First off, I spotted two key issues in your original code that were stopping your text tweaks from working:

• JSON syntax errors: You were missing commas between most object properties (super easy to miss!)
• Wrong placement for fontSize: In Vega-Lite, visual properties like font size and text alignment belong in the mark configuration, not the encoding section.

Here's the corrected text layer code, with position controls added:

{
  "mark": {
    "type": "text",
    "fontSize": 40,
    "align": "center", // Centers text horizontally in the rect
    "baseline": "middle", // Centers text vertically in the rect
    "xOffset": 0, // Optional: tweak horizontal position
    "yOffset": 0 // Optional: tweak vertical position
  },
  "encoding": {
    "text": {"field": "z", "type": "quantitative"},
    "color": {"value": "black"}
  }
}

2. Adding a Second Text Layer #

To add a second text element (like a different value or label), just add another object to your layer array. For example, if you wanted to add a smaller secondary text below the main z value:

{
  "mark": {
    "type": "text",
    "fontSize": 20,
    "align": "center",
    "baseline": "bottom",
    "yOffset": 15 // Pushes this text below the main one
  },
  "encoding": {
    "text": {"field": "z", "type": "quantitative", "format": ".0f"},
    "color": {"value": "darkblue"}
  }
}

Stick this right after your existing text layer in the layer array, and you'll have two text elements per block.

3. Creating a Spaceless Heatmap #

To make your heatmap blocks fit together with no gaps, adjust the padding on your x and y ordinal scales to 0, and ensure your rect marks fill the available space. Here's how to update your encoding section:

"encoding": {
  "x": {
    "field": "x",
    "type": "ordinal",
    "title": "X",
    "scale": {"padding": 0} // Removes horizontal gaps
  },
  "y": {
    "field": "y",
    "type": "ordinal",
    "title": "Y",
    "scale": {"padding": 0} // Removes vertical gaps
  }
}

You can also add bandSize: "fit" to your rect mark if you want the blocks to automatically fill the chart dimensions:

{
  "mark": {
    "type": "rect",
    "bandSize": "fit"
  },
  "from": {"data": "values"},
  "encoding": {
    "color": {
      "field": "z",
      "scale": {"scheme": "redyellowgreen"},
      "type": "quantitative"
    }
  }
}

Full Corrected Code #

Here's the complete, fixed version of your code with all the above changes applied:

{
  "$schema": "https://vega.github.io/schema/vega-lite/v2.4.3.json",
  "config": {"view": {"height": 300, "width": 400}},
  "data": {
    "values": [
      {"x": 0, "y": 0, "z": 0},
      {"x": 1, "y": 0, "z": 1},
      {"x": 2, "y": 0, "z": 4},
      {"x": 3, "y": 0, "z": 9},
      {"x": 4, "y": 0, "z": 16},
      {"x": 5, "y": 0, "z": 25},
      {"x": 0, "y": 1, "z": 1},
      {"x": 1, "y": 1, "z": 2},
      {"x": 2, "y": 1, "z": 5},
      {"x": 3, "y": 1, "z": 10},
      {"x": 4, "y": 1, "z": 17},
      {"x": 5, "y": 1, "z": 26}
    ]
  },
  "encoding": {
    "x": {
      "field": "x",
      "type": "ordinal",
      "title": "X",
      "scale": {"padding": 0}
    },
    "y": {
      "field": "y",
      "type": "ordinal",
      "title": "Y",
      "scale": {"padding": 0}
    }
  },
  "layer": [
    {
      "mark": {
        "type": "rect",
        "bandSize": "fit"
      },
      "from": {"data": "values"},
      "encoding": {
        "color": {
          "field": "z",
          "scale": {"scheme": "redyellowgreen"},
          "type": "quantitative"
        }
      }
    },
    {
      "mark": {
        "type": "text",
        "fontSize": 40,
        "align": "center",
        "baseline": "middle"
      },
      "encoding": {
        "text": {"field": "z", "type": "quantitative"},
        "color": {"value": "black"}
      }
    },
    // Optional second text layer
    {
      "mark": {
        "type": "text",
        "fontSize": 20,
        "align": "center",
        "baseline": "bottom",
        "yOffset": 15
      },
      "encoding": {
        "text": {"field": "z", "type": "quantitative", "format": ".0f"},
        "color": {"value": "darkblue"}
      }
    }
  ]
}

内容的提问来源于stack exchange，提问作者Светлана Прожирова